🐛 [Bug]: elementui中的el-row的gutter在canvas中不起作用 #543
Labels
question
Further information is requested
Comments
Title: 🐛 [Bug]: The el-row gutter in elementui does not work in canvas Environmentgoogle and edge Versionv16.20.2 VersionDon’t know how to check the latest stable version Link to minimal reproductionhttps://github.com/opentiny/tiny-engine Step to reproduceel-row component configuration {
"id": 1,
"version": "2.4.2",
"name": {
"zh_CN": "el-row"
},
"component": "ElRow",
"icon": "el-row",
"description": "el-row",
"doc_url": "",
"screenshot": "",
"tags": "",
"keywords": "",
"dev_mode": "proCode",
"npm": {
"package": "element-plus",
"version": "2.4.2",
"script": "https://npm.onmicrosoft.cn/[email protected]/dist/index.full.mjs",
"css": "https://npm.onmicrosoft.cn/[email protected]/dist/index.css",
"dependencies": null,
"exportName": "ElRow"
},
"group": "Container component",
"configure": {
"loop": true,
"condition": true,
"styles": true,
"isContainer": false,
"isModal": false,
"isPopper": false,
"nestingRule": {
"childWhitelist": "",
"parentWhitelist": "",
"descendantBlacklist": "",
"ancestorWhitelist": ""
},
"isNullNode": false,
"isLayout": false,
"rootSelector": "",
"shortcuts": {
"properties": [
"type",
"size"
]
},
"contextMenu": {
"actions": [
"copy",
"remove",
"insert",
"updateAttr",
"bindEevent",
"createBlock"
],
"disable": []
},
"invalidity": [
""
],
"clickCapture": true,
"framework": "Vue"
},
"schema": {
"properties": [
{
"name": "0",
"label": {
"zh_CN": "Basic attributes"
},
"content": [
{
"property": "justify",
"label": {
"text": {
"zh_CN": "justify"
}
},
"description": {
"zh_CN": "Horizontal arrangement under flex layout"
},
"cols": 12,
"labelPosition": "top",
"type": "string",
"defaultValue": "start",
"widget": {
"component": "MetaSelect",
"props": {
"options": [
{
"label": "start",
"value": "start"
},
{
"label": "end",
"value": "end"
},
{
"label": "center",
"value": "center"
},
{
"label": "space-around",
"value": "space-around"
},
{
"label": "space-between",
"value": "space-between"
},
{
"label": "space-evenly",
"value": "space-evenly"
}
]
}
}
},
{
"property": "gutter",
"label": {
"text": {
"zh_CN": "gutter"
}
},
"description": {
"zh_CN": "Grid interval"
},
"required": true,
"readOnly": false,
"disabled": false,
"cols": 12,
"labelPosition": "top",
"type": "number",
"defaultValue":0,
"widget": {
"component": "MetaNumber",
"props": {
}
}
},
{
"property": "align",
"label": {
"text": {
"zh_CN": "align"
}
},
"description": {
"zh_CN": "Vertical arrangement under flex layout"
},
"cols": 12,
"labelPosition": "top",
"type": "string",
"widget": {
"component": "MetaSelect",
"props": {
"options": [
{
"label": "top",
"value": "top"
},
{
"label": "middle",
"value": "middle"
},
{
"label": "bottom",
"value": "bottom"
}
]
}
}
},
{
"property": "tag",
"label": {
"text": {
"zh_CN": "tag"
}
},
"description": {
"zh_CN": "Grid interval"
},
"required": true,
"readOnly": false,
"disabled": false,
"cols": 12,
"labelPosition": "top",
"type": "string",
"widget": {
"component": "MetaInput",
"props": {}
}
}
],
"description": {
"zh_CN": ""
}
}
],
"events": {},
"slots": {
"default": {
"label": {
"zh_CN": "Container slot"
},
"description": {
"zh_CN": "el-row container slot"
}
}
}
}
}el-col configuration {
"id": 1,
"version": "2.4.2",
"name": {
"zh_CN": "el-col"
},
"component": "ElCol",
"icon": "el-col",
"description": "el-col",
"doc_url": "",
"screenshot": "",
"tags": "",
"keywords": "",
"dev_mode": "proCode",
"npm": {
"package": "element-plus",
"version": "2.4.2",
"script": "https://npm.onmicrosoft.cn/[email protected]/dist/index.full.mjs",
"css": "https://npm.onmicrosoft.cn/[email protected]/dist/index.css",
"dependencies": null,
"exportName": "ElCol"
},
"group": "Container component",
"configure": {
"loop": true,
"condition": true,
"styles": true,
"isContainer": false,
"isModal": false,
"isPopper": false,
"nestingRule": {
"childWhitelist": "",
"parentWhitelist": "",
"descendantBlacklist": "",
"ancestorWhitelist": ""
},
"isNullNode": false,
"isLayout": false,
"rootSelector": "",
"shortcuts": {
"properties": [
"type",
"size"
]
},
"contextMenu": {
"actions": [
"copy",
"remove",
"insert",
"updateAttr",
"bindEevent",
"createBlock"
],
"disable": []
},
"invalidity": [
""
],
"clickCapture": true,
"framework": "Vue"
},
"schema": {
"properties": [
{
"name": "0",
"label": {
"zh_CN": "Basic attributes"
},
"content": [
{
"property": "span",
"label": {
"text": {
"zh_CN": "span"
}
},
"description": {
"zh_CN": "Number of columns occupied by grid"
},
"required": true,
"readOnly": false,
"disabled": false,
"cols": 12,
"labelPosition": "top",
"type": "number",
"defaultValue": 24,
"widget": {
"component": "MetaNumber",
"props": {}
}
},
{
"property": "offset",
"label": {
"text": {
"zh_CN": "offset"
}
},
"description": {
"zh_CN": "The number of intervals on the left side of the grid"
},
"required": true,
"readOnly": false,
"disabled": false,
"cols": 12,
"labelPosition": "top",
"type": "number",
"defaultValue": 0,
"widget": {
"component": "MetaNumber",
"props": {}
}
},
{
"property": "push",
"label": {
"text": {
"zh_CN": "push"
}
},
"description": {
"zh_CN": "Move the grid to the right by the number of cells"
},
"required": true,
"readOnly": false,
"disabled": false,
"cols": 12,
"labelPosition": "top",
"type": "number",
"defaultValue": 0,
"widget": {
"component": "MetaNumber",
"props": {}
}
},
{
"property": "pull",
"label": {
"text": {
"zh_CN": "pull"
}
},
"description": {
"zh_CN": "Move the grid to the left by the number of cells"
},
"required": true,
"readOnly": false,
"disabled": false,
"cols": 12,
"labelPosition": "top",
"type": "number",
"defaultValue": 0,
"widget": {
"component": "MetaNumber",
"props": {}
}
},
{
"property": "xs",
"label": {
"text": {
"zh_CN": "xs"
}
},
"description": {
"zh_CN": "<768px responsive grid number or grid attribute object"
},
"required": true,
"readOnly": false,
"disabled": false,
"cols": 12,
"labelPosition": "top",
"type": "object",
"widget": {
"component": "MetaCodeEditor",
"props": {}
}
},
{
"property": "sm",
"label": {
"text": {
"zh_CN": "sm"
}
},
"description": {
"zh_CN": "≥768px responsive grid number or grid attribute object"
},
"required": true,
"readOnly": false,
"disabled": false,
"cols": 12,
"labelPosition": "top",
"type": "object",
"widget": {
"component": "MetaCodeEditor",
"props": {}
}
},
{
"property": "md",
"label": {
"text": {
"zh_CN": "md"
}
},
"description": {
"zh_CN": "≥992px responsive grid number or grid attribute object"
},
"required": true,
"readOnly": false,
"disabled": false,
"cols": 12,
"labelPosition": "top",
"type": "object",
"widget": {
"component": "MetaCodeEditor",
"props": {}
}
},
{
"property": "lg",
"label": {
"text": {
"zh_CN": "lg"
}
},
"description": {
"zh_CN": "≥1200px responsive grid number or grid attribute object"
},
"required": true,
"readOnly": false,
"disabled": false,
"cols": 12,
"labelPosition": "top",
"type": "object",
"widget": {
"component": "MetaCodeEditor",
"props": {}
}
},
{
"property": "xl",
"label": {
"text": {
"zh_CN": "xl"
}
},
"description": {
"zh_CN": "≥1920px responsive grid number or grid attribute object"
},
"required": true,
"readOnly": false,
"disabled": false,
"cols": 12,
"labelPosition": "top",
"type": "object",
"widget": {
"component": "MetaCodeEditor",
"props": {}
}
},
{
"property": "tag",
"label": {
"text": {
"zh_CN": "tag"
}
},
"description": {
"zh_CN": "Custom element label"
},
"required": true,
"readOnly": false,
"disabled": false,
"cols": 12,
"labelPosition": "top",
"type": "string",
"defaultValue": 0,
"widget": {
"component": "MetaInput",
"props": {}
}
}
],
"description": {
"zh_CN": ""
}
}
],
"events": {},
"slots": {
"default": {
"label": {
"zh_CN": "Container slot"
},
"description": {
"zh_CN": "el-row container slot"
}
}
}
}
}
What is expectedNo response What is actually happeningNo response What is your project nametiny-engine Any additional comments (optional)No response |
|
【问题分析】
{
"npm": {
"package": "element-plus",
"version": "2.4.2",
"script": "https://unpkg.com/[email protected]/dist/index.full.mjs",
"css": "https://unpkg.com/[email protected]/dist/index.css",
"dependencies": null,
"exportName": "ElCol",
// 需要加上解构为 true 的配置，ElRow 物料也需要加
"destructuring": true
}
}
{
"configure": {
// 容器类型需要配置 为 true，才能往里面拖入内容
"isContainer": true
}
}【修改验证】 {
"state": {},
"methods": {},
"componentName": "Page",
"fileName": "createVm",
"css": ".elrow-vmvpt {\n background-color: #4976fd;\n}\n.elcol-olgmh {\n background-color: #ece636;\n}\n.elcol-msjrq {\n background-color: #f76950;\n}\n",
"props": {},
"lifeCycles": {},
"children": [
{
"componentName": "ElRow",
"props": {
"className": "elrow-vmvpt",
"gutter": 30
},
"id": "3253e244",
"children": [
{
"componentName": "ElCol",
"props": {
"className": "elcol-olgmh",
"span": 12
},
"id": "744e5933",
"children": [
{
"componentName": "Text",
"props": {
"text": "TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。"
},
"id": "22369a63"
}
]
},
{
"componentName": "ElCol",
"props": {
"className": "elcol-msjrq",
"span": 12
},
"id": "23524385",
"children": [
{
"componentName": "Text",
"props": {
"text": "TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。",
"span": 12
},
"id": "5443c5b6"
}
]
}
]
}
],
"dataSource": {
"list": []
},
"bridge": {
"imports": []
},
"inputs": [],
"outputs": []
}点击页面预览，可以验证 gutter 属性生效 【问题结论】 |
【Problem Analysis】
{
"npm": {
"package": "element-plus",
"version": "2.4.2",
"script": "https://unpkg.com/[email protected]/dist/index.full.mjs",
"css": "https://unpkg.com/[email protected]/dist/index.css",
"dependencies": null,
"exportName": "ElCol",
// It is necessary to add the configuration of destructuring to true, and the ElRow material also needs to be added
"destructuring": true
}
}
{
"configure": {
// The container type needs to be configured as true before you can drag content into it.
"isContainer": true
}
}[Modify Verification] {
"state": {},
"methods": {},
"componentName": "Page",
"fileName": "createVm",
"css": ".elrow-vmvpt {\n background-color: #4976fd;\n}\n.elcol-olgmh {\n background-color: #ece636;\n}\n.elcol-msjrq {\n background-color: #f76950;\n}\n",
"props": {},
"lifeCycles": {},
"children": [
{
"componentName": "ElRow",
"props": {
"className": "elrow-vmvpt",
"gutter": 30
},
"id": "3253e244",
"children": [
{
"componentName": "ElCol",
"props": {
"className": "elcol-olgmh",
"span": 12
},
"id": "744e5933",
"children": [
{
"componentName": "Text",
"props": {
"text": "TinyEngine front-end visual designer provides customized services for designer developers to build their own exclusive designers online."
},
"id": "22369a63"
}
]
},
{
"componentName": "ElCol",
"props": {
"className": "elcol-msjrq",
"span": 12
},
"id": "23524385",
"children": [
{
"componentName": "Text",
"props": {
"text": "TinyEngine front-end visual designer provides customized services for designer developers to build their own exclusive designers online.",
"span": 12
},
"id": "5443c5b6"
}
]
}
]
}
],
"dataSource": {
"list": []
},
"bridge": {
"imports": []
},
"inputs": [],
"outputs": []
}Click on the page preview to verify that the gutter attribute takes effect [Problem conclusion] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Environment
google与edge
Version
v16.20.2
Version
不知道如何查看最新稳定版
Link to minimal reproduction
https://github.com/opentiny/tiny-engine
Step to reproduce
el-row组件配置
{ "id": 1, "version": "2.4.2", "name": { "zh_CN": "el-row" }, "component": "ElRow", "icon": "el-row", "description": "el-row", "doc_url": "", "screenshot": "", "tags": "", "keywords": "", "dev_mode": "proCode", "npm": { "package": "element-plus", "version": "2.4.2", "script": "https://npm.onmicrosoft.cn/[email protected]/dist/index.full.mjs", "css": "https://npm.onmicrosoft.cn/[email protected]/dist/index.css", "dependencies": null, "exportName": "ElRow" }, "group": "容器组件", "configure": { "loop": true, "condition": true, "styles": true, "isContainer": false, "isModal": false, "isPopper": false, "nestingRule": { "childWhitelist": "", "parentWhitelist": "", "descendantBlacklist": "", "ancestorWhitelist": "" }, "isNullNode": false, "isLayout": false, "rootSelector": "", "shortcuts": { "properties": [ "type", "size" ] }, "contextMenu": { "actions": [ "copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock" ], "disable": [] }, "invalidity": [ "" ], "clickCapture": true, "framework": "Vue" }, "schema": { "properties": [ { "name": "0", "label": { "zh_CN": "基础属性" }, "content": [ { "property": "justify", "label": { "text": { "zh_CN": "justify" } }, "description": { "zh_CN": "flex 布局下的水平排列方式" }, "cols": 12, "labelPosition": "top", "type": "string", "defaultValue": "start", "widget": { "component": "MetaSelect", "props": { "options": [ { "label": "start", "value": "start" }, { "label": "end", "value": "end" }, { "label": "center", "value": "center" }, { "label": "space-around", "value": "space-around" }, { "label": "space-between", "value": "space-between" }, { "label": "space-evenly", "value": "space-evenly" } ] } } }, { "property": "gutter", "label": { "text": { "zh_CN": "gutter" } }, "description": { "zh_CN": "栅格间隔" }, "required": true, "readOnly": false, "disabled": false, "cols": 12, "labelPosition": "top", "type": "number", "defaultValue":0, "widget": { "component": "MetaNumber", "props": { } } }, { "property": "align", "label": { "text": { "zh_CN": "align" } }, "description": { "zh_CN": "flex 布局下的垂直排列方式" }, "cols": 12, "labelPosition": "top", "type": "string", "widget": { "component": "MetaSelect", "props": { "options": [ { "label": "top", "value": "top" }, { "label": "middle", "value": "middle" }, { "label": "bottom", "value": "bottom" } ] } } }, { "property": "tag", "label": { "text": { "zh_CN": "tag" } }, "description": { "zh_CN": "栅格间隔" }, "required": true, "readOnly": false, "disabled": false, "cols": 12, "labelPosition": "top", "type": "string", "widget": { "component": "MetaInput", "props": {} } } ], "description": { "zh_CN": "" } } ], "events": {}, "slots": { "default": { "label": { "zh_CN": "容器插槽" }, "description": { "zh_CN": "el-row容器插槽" } } } } }el-col配置
{ "id": 1, "version": "2.4.2", "name": { "zh_CN": "el-col" }, "component": "ElCol", "icon": "el-col", "description": "el-col", "doc_url": "", "screenshot": "", "tags": "", "keywords": "", "dev_mode": "proCode", "npm": { "package": "element-plus", "version": "2.4.2", "script": "https://npm.onmicrosoft.cn/[email protected]/dist/index.full.mjs", "css": "https://npm.onmicrosoft.cn/[email protected]/dist/index.css", "dependencies": null, "exportName": "ElCol" }, "group": "容器组件", "configure": { "loop": true, "condition": true, "styles": true, "isContainer": false, "isModal": false, "isPopper": false, "nestingRule": { "childWhitelist": "", "parentWhitelist": "", "descendantBlacklist": "", "ancestorWhitelist": "" }, "isNullNode": false, "isLayout": false, "rootSelector": "", "shortcuts": { "properties": [ "type", "size" ] }, "contextMenu": { "actions": [ "copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock" ], "disable": [] }, "invalidity": [ "" ], "clickCapture": true, "framework": "Vue" }, "schema": { "properties": [ { "name": "0", "label": { "zh_CN": "基础属性" }, "content": [ { "property": "span", "label": { "text": { "zh_CN": "span" } }, "description": { "zh_CN": "栅格占据的列数" }, "required": true, "readOnly": false, "disabled": false, "cols": 12, "labelPosition": "top", "type": "number", "defaultValue": 24, "widget": { "component": "MetaNumber", "props": {} } }, { "property": "offset", "label": { "text": { "zh_CN": "offset" } }, "description": { "zh_CN": "栅格左侧的间隔格数" }, "required": true, "readOnly": false, "disabled": false, "cols": 12, "labelPosition": "top", "type": "number", "defaultValue": 0, "widget": { "component": "MetaNumber", "props": {} } }, { "property": "push", "label": { "text": { "zh_CN": "push" } }, "description": { "zh_CN": "栅格向右移动格数" }, "required": true, "readOnly": false, "disabled": false, "cols": 12, "labelPosition": "top", "type": "number", "defaultValue": 0, "widget": { "component": "MetaNumber", "props": {} } }, { "property": "pull", "label": { "text": { "zh_CN": "pull" } }, "description": { "zh_CN": "栅格向左移动格数" }, "required": true, "readOnly": false, "disabled": false, "cols": 12, "labelPosition": "top", "type": "number", "defaultValue": 0, "widget": { "component": "MetaNumber", "props": {} } }, { "property": "xs", "label": { "text": { "zh_CN": "xs" } }, "description": { "zh_CN": "<768px 响应式栅格数或者栅格属性对象" }, "required": true, "readOnly": false, "disabled": false, "cols": 12, "labelPosition": "top", "type": "object", "widget": { "component": "MetaCodeEditor", "props": {} } }, { "property": "sm", "label": { "text": { "zh_CN": "sm" } }, "description": { "zh_CN": "≥768px 响应式栅格数或者栅格属性对象" }, "required": true, "readOnly": false, "disabled": false, "cols": 12, "labelPosition": "top", "type": "object", "widget": { "component": "MetaCodeEditor", "props": {} } }, { "property": "md", "label": { "text": { "zh_CN": "md" } }, "description": { "zh_CN": "≥992px 响应式栅格数或者栅格属性对象" }, "required": true, "readOnly": false, "disabled": false, "cols": 12, "labelPosition": "top", "type": "object", "widget": { "component": "MetaCodeEditor", "props": {} } }, { "property": "lg", "label": { "text": { "zh_CN": "lg" } }, "description": { "zh_CN": "≥1200px 响应式栅格数或者栅格属性对象" }, "required": true, "readOnly": false, "disabled": false, "cols": 12, "labelPosition": "top", "type": "object", "widget": { "component": "MetaCodeEditor", "props": {} } }, { "property": "xl", "label": { "text": { "zh_CN": "xl" } }, "description": { "zh_CN": "≥1920px 响应式栅格数或者栅格属性对象" }, "required": true, "readOnly": false, "disabled": false, "cols": 12, "labelPosition": "top", "type": "object", "widget": { "component": "MetaCodeEditor", "props": {} } }, { "property": "tag", "label": { "text": { "zh_CN": "tag" } }, "description": { "zh_CN": "自定义元素标签" }, "required": true, "readOnly": false, "disabled": false, "cols": 12, "labelPosition": "top", "type": "string", "defaultValue": 0, "widget": { "component": "MetaInput", "props": {} } } ], "description": { "zh_CN": "" } } ], "events": {}, "slots": { "default": { "label": { "zh_CN": "容器插槽" }, "description": { "zh_CN": "el-row容器插槽" } } } } }What is expected
No response
What is actually happening
No response
What is your project name
tiny-engine
Any additional comments (optional)
No response
The text was updated successfully, but these errors were encountered: