可调整大小，使用 px 输出中的 unitWidth 换成百分比。

Question

你好，@artf， 感谢你制作了这个了不起的框架。 最近我基于你的[flexbox插件]（https://github.com/artf/grapesjs-blocks-flexbox）做了一个自定义组件。 ![演示]（https://cdn.kapwing.com/final5cc6e37564533c0013870e09827753.gif） 红色箭头是模型的实际值。 绿箭头正是我预期的那个。 能不能把“unitWidth”设为“px”，但输出设置为“percent”？ 以下是我尝试过的方法我将它们分为两个部分， “网格”组件，仅作为容器，然后我将显示设置为“flex”，“列”组件，我把它放成可调整大小。可调大小 “JavaScript cont keyWidth = 'width' 一致性步 = 1 cont minDim = 1 const unitWidth = 'px' const resizerRight = { ...调整Btm， TL：0， TC：0， TR：0， CL： 0， CR：1， BL：0， 公元前：0， BR： 0， keyWidth， currentU...

artf · Accepted Answer

啊等等，是我错了，'opts'是第三个 'updateWidth（model， value， opts = {}） {' 顺便说一下，setStyle中的第二个参数是选项（例如，'{ silent： true }'以避免触发变更监听器），这些选项也会在监听者的回调中出现，所以我就用自定义键'fromPxToPerc'来判断自定义逻辑什么时候触发变更

afdallah · Answer

你真是太棒了!! 👍 👍 非常感谢@artf。

artf · Answer

你好，@afdallah，从调整尺寸的角度来说，你需要使用“updateTarget”选项来自定义目标，但很遗憾你不能，因为它已经[被SelectCommand大量使用]（https://github.com/artf/grapesjs/blob/dev/src/commands/view/SelectComponent.js#L430-L473） 所以我建议你尝试在 updateWidth 函数中使用它，以避免无限循环： “''js updateWidth（model， opts = {}） { 如果（opts.fromPxToPerc）返回; //... model.setStyle（{ width： parseFloat（selectedWidth， 10） / containerWidth * 100 + '%' }， { fromPxToPerc： 1 }） //... } ```

可调整大小，使用 px 输出中的 unitWidth 换成百分比。

问题

回答（3）

相关问答

发行版中缺少Flexbox图标，但在 grapesjs.com 演示页面中已演示。

在背景属性中指定背景大小会破坏葡萄

：将css变量添加为style manager属性

组件属性配置

与此问题匹配的付费插件

相关教程

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

浏览插件分类