tiny-engine
tiny-engine copied to clipboard
opentiny
🐛 [Bug]: elementui中的el-row的gutter在canvas中不起作用
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
Bot detected the issue body's language is not English, translate it automatically.
Title: 🐛 [Bug]: The el-row gutter in elementui does not work in canvas
Environment
google and edge
Version
v16.20.2
Version
Don’t know how to check the latest stable version
Link to minimal reproduction
https://github.com/opentiny/tiny-engine
Step to reproduce
el-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 expected
No response
What is actually happening
No response
What is your project name
tiny-engine
Any additional comments (optional)
No response
【问题分析】
- 用户物料npm配置不对，导致出码结果会不对。需要更改 npm 配置
{
"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 配置不对
{
"configure": {
// 容器类型需要配置 为 true，才能往里面拖入内容
"isContainer": true
}
}
【修改验证】 修改以上物料后，拖入内容，生成以下页面 schema
{
"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 属性生效
【问题结论】 用户物料配置问题，非 bug
@yao521521
Bot detected the issue body's language is not English, translate it automatically.
【Problem Analysis】
- The user material npm configuration is incorrect, resulting in incorrect coding results. Need to change npm configuration
{
"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
}
}
- The user material configure configuration is incorrect.
{
"configure": {
// The container type needs to be configured as true before you can drag content into it.
"isContainer": true
}
}
[Modify Verification] After modifying the above materials, drag in the content to generate the following page schema
{
"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] User material configuration problem, not a bug
@yao521521