🐛 [Bug]: 帮忙看一下element plus时间日期组件拖入到画板以后，点击组件没有展示右侧属性配置，点击大纲才会展示

[youchen133]

Environment

mac

Version

16

Version

latest

Link to minimal reproduction

无

Step to reproduce

https://github.com/opentiny/tiny-engine/assets/27907927/0d11c519-47cb-4f56-a072-2b1cc61ebad2

What is expected

No response

What is actually happening

No response

Any additional comments (optional)

No response

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: 🐛 [Bug]: Help me take a look at the element plus time and date component after dragging it into the artboard. Clicking on the component does not display the attribute configuration on the right side. Clicking on the outline will display it.

[ghost]

@youchen133 你好，麻烦提供一下这个组件的配置，即bundle.json里的组件配置

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

@youchen133 Hello, please provide the configuration of this component, that is, the component configuration in bundle.json

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

"components": [ { "name": { "zh_CN": "Time selector" }, "component": "ElTimePicker", "icon": "time-picker", "description": "Time picker", "screenshot": "", "npm": { "package": "element-plus", "exportName": "ElTimePicker", "version": "2.3.8", "script": "https://unpkg.com/element-plus@2.3.8/dist/index.full.mjs", "css": "https://unpkg.com/element-plus@2.3.8/dist/index.css", "destructuring": true }, "group": "component", "schema": { "properties": [ { "label": { "zh_CN": "Basic information" }, "description": { "zh_CN": "Basic information" }, "collapse": { "number": 8, "text": { "zh_CN": "Show more" } }, "content": [ { "property": "modelValue", "label": { "text": { "zh_CN": "Bind value" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaCodeEditor", "props": { "language": "json" } }, "description": { "zh_CN": "Two-way binding value" }, "labelPosition": "left" }, { "property": "size", "label": { "text": { "zh_CN": "size" } }, "cols": 12, "rules": [], "required": false, "readOnly": false, "disabled": false, "widget": { "component": "MetaSelect", "props": { "options": [ { "label": "large", "value": "large" }, { "label": "small", "value": "small" }, { "label": "default", "value": "default" } ] } }, "description": { "zh_CN": "Set different sizes" } }, { "property": "placeholder", "label": { "text": { "zh_CN": "Placeholder content for non-range selection" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaInput", "props": {} }, "description": { "zh_CN": "Placeholder content for non-range selection" } }, { "property": "start-placeholder", "label": { "text": { "zh_CN": "Placeholder content for the start date when selecting the range" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaInput", "props": {} }, "description": { "zh_CN": "Placeholder content for the start date when selecting the range" } }, { "property": "end-placeholder", "label": { "text": { "zh_CN": "Placeholder content for the end date when selecting a range" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaInput", "props": {} }, "description": { "zh_CN": "Placeholder content for the end date when selecting a range" } }, { "property": "format", "label": { "text": { "zh_CN": "Format displayed in the input box" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaInput", "props": {} }, "description": { "zh_CN": "Format displayed in the input box" } }, { "property": "editable", "label": { "text": { "zh_CN": "The text box can be entered" } }, "required": false, "readOnly": false, "disabled": false, "defaultValue": true, "cols": 12, "widget": { "component": "MetaSwitch", "props": {} }, "description": { "zh_CN": "The text box can be entered" }, "labelPosition": "left" }, { "property": "clearable", "label": { "text": { "zh_CN": "Show clear button" } }, "required": false, "readOnly": false, "disabled": false, "defaultValue": true, "cols": 12, "widget": { "component": "MetaSwitch", "props": {} }, "description": { "zh_CN": "Whether to display the clear button" }, "labelPosition": "left" }, { "property": "readonly", "label": { "text": { "zh_CN": "Read only" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaSwitch", "props": {} }, "description": { "zh_CN": "Whether it is read-only" }, "labelPosition": "left" }, { "property": "disabled", "label": { "text": { "zh_CN": "Disable" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaSwitch", "props": {} }, "description": { "zh_CN": "Whether it is disabled" }, "labelPosition": "left" } ] } ], "events": { "onUpdate:modelValue": { "label": { "zh_CN": "Triggered when the value of two-way binding changes" }, "description": { "zh_CN": "Trigger when value changes" }, "type": "event", "functionInfo": { "params": [ { "name": "value", "type": "string", "defaultValue": "", "description": { "zh_CN": "Value of two-way binding" } } ], "returns": {} }, "defaultValue": "" } } }, "configure": { "loop": true, "condition": true, "styles": true, "isContainer": false, "isModal": false, "nestingRule": { "childWhitelist": "", "parentWhitelist": "", "descendantBlacklist": "", "ancestorWhitelist": "" }, "isNullNode": false, "isLayout": false, "rootSelector": "", "shortcuts": { "properties": ["size"] }, "contextMenu": { "actions": ["create symbol"], "disable": ["copy", "remove"] } } } ]

The snippets code is as follows { "name": { "zh_CN": "Time selector" }, "icon": "time-picker", "screenshot": "", "snippetName": "ElTimePicker", "schema": { "componentName": "ElTimePicker", "props": { "modelValue": 1702785160952 } } }

[youchen133]

@youchen133 你好，麻烦提供一下这个组件的配置，即bundle.json里的组件配置 components的配置： { "name": { "zh_CN": "时间选择器" }, "component": "ElTimePicker", "icon": "time-picker", "description": "时间选择器", "screenshot": "", "npm": { "package": "element-plus", "exportName": "ElTimePicker", "version": "2.3.8", "script": "https://unpkg.com/element-plus@2.3.8/dist/index.full.mjs", "css": "https://unpkg.com/element-plus@2.3.8/dist/index.css", "destructuring": true }, "group": "component", "schema": { "properties": [ { "label": { "zh_CN": "基础信息" }, "description": { "zh_CN": "基础信息" }, "collapse": { "number": 8, "text": { "zh_CN": "显示更多" } }, "content": [ { "property": "modelValue", "label": { "text": { "zh_CN": "绑定值" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaCodeEditor", "props": { "language": "json" } }, "description": { "zh_CN": "双向绑定值" }, "labelPosition": "left" }, { "property": "size", "label": { "text": { "zh_CN": "大小" } }, "cols": 12, "rules": [], "required": false, "readOnly": false, "disabled": false, "widget": { "component": "MetaSelect", "props": { "options": [ { "label": "large", "value": "large" }, { "label": "small", "value": "small" }, { "label": "default", "value": "default" } ] } }, "description": { "zh_CN": "设置不同大小" } }, { "property": "placeholder", "label": { "text": { "zh_CN": "非范围选择时的占位内容" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaInput", "props": {} }, "description": { "zh_CN": "非范围选择时的占位内容" } }, { "property": "start-placeholder", "label": { "text": { "zh_CN": "范围选择时开始日期的占位内容" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaInput", "props": {} }, "description": { "zh_CN": "范围选择时开始日期的占位内容" } }, { "property": "end-placeholder", "label": { "text": { "zh_CN": "范围选择时结束日期的占位内容" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaInput", "props": {} }, "description": { "zh_CN": "范围选择时结束日期的占位内容" } }, { "property": "format", "label": { "text": { "zh_CN": "显示在输入框中的格式" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaInput", "props": {} }, "description": { "zh_CN": "显示在输入框中的格式" } }, { "property": "editable", "label": { "text": { "zh_CN": "文本框可输入" } }, "required": false, "readOnly": false, "disabled": false, "defaultValue": true, "cols": 12, "widget": { "component": "MetaSwitch", "props": {} }, "description": { "zh_CN": "文本框可输入" }, "labelPosition": "left" }, { "property": "clearable", "label": { "text": { "zh_CN": "显示清除按钮" } }, "required": false, "readOnly": false, "disabled": false, "defaultValue": true, "cols": 12, "widget": { "component": "MetaSwitch", "props": {} }, "description": { "zh_CN": "是否显示清除按钮" }, "labelPosition": "left" }, { "property": "readonly", "label": { "text": { "zh_CN": "只读" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaSwitch", "props": {} }, "description": { "zh_CN": "是否只读" }, "labelPosition": "left" }, { "property": "disabled", "label": { "text": { "zh_CN": "禁用" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaSwitch", "props": {} }, "description": { "zh_CN": "是否被禁用" }, "labelPosition": "left" } ] } ], "events": { "onUpdate:modelValue": { "label": { "zh_CN": "双向绑定的值改变时触发" }, "description": { "zh_CN": "在值改变时触发" }, "type": "event", "functionInfo": { "params": [ { "name": "value", "type": "string", "defaultValue": "", "description": { "zh_CN": "双向绑定的值" } } ], "returns": {} }, "defaultValue": "" } } }, "configure": { "loop": true, "condition": true, "styles": true, "isContainer": false, "isModal": false, "nestingRule": { "childWhitelist": "", "parentWhitelist": "", "descendantBlacklist": "", "ancestorWhitelist": "" }, "isNullNode": false, "isLayout": false, "rootSelector": "", "shortcuts": { "properties": ["size"] }, "contextMenu": { "actions": ["create symbol"], "disable": ["copy", "remove"] } } }

snippets: { "name": { "zh_CN": "时间选择器" }, "icon": "time-picker", "screenshot": "", "snippetName": "ElTimePicker", "schema": { "componentName": "ElTimePicker", "props": { "modelValue": 1702785160952 } } }

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

@youchen133 Hello, please provide the configuration of this component, that is, the component configuration in bundle.json Configuration of components: { "name": { "zh_CN": "Time selector" }, "component": "ElTimePicker", "icon": "time-picker", "description": "Time picker", "screenshot": "", "npm": { "package": "element-plus", "exportName": "ElTimePicker", "version": "2.3.8", "script": "https://unpkg.com/element-plus@2.3.8/dist/index.full.mjs", "css": "https://unpkg.com/element-plus@2.3.8/dist/index.css", "destructuring": true }, "group": "component", "schema": { "properties": [ { "label": { "zh_CN": "Basic information" }, "description": { "zh_CN": "Basic information" }, "collapse": { "number": 8, "text": { "zh_CN": "Show more" } }, "content": [ { "property": "modelValue", "label": { "text": { "zh_CN": "Bind value" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaCodeEditor", "props": { "language": "json" } }, "description": { "zh_CN": "Two-way binding value" }, "labelPosition": "left" }, { "property": "size", "label": { "text": { "zh_CN": "size" } }, "cols": 12, "rules": [], "required": false, "readOnly": false, "disabled": false, "widget": { "component": "MetaSelect", "props": { "options": [ { "label": "large", "value": "large" }, { "label": "small", "value": "small" }, { "label": "default", "value": "default" } ] } }, "description": { "zh_CN": "Set different sizes" } }, { "property": "placeholder", "label": { "text": { "zh_CN": "Placeholder content for non-range selection" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaInput", "props": {} }, "description": { "zh_CN": "Placeholder content for non-range selection" } }, { "property": "start-placeholder", "label": { "text": { "zh_CN": "Placeholder content for the start date when selecting the range" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaInput", "props": {} }, "description": { "zh_CN": "Placeholder content for the start date when selecting the range" } }, { "property": "end-placeholder", "label": { "text": { "zh_CN": "Placeholder content for the end date when selecting a range" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaInput", "props": {} }, "description": { "zh_CN": "Placeholder content for the end date when selecting a range" } }, { "property": "format", "label": { "text": { "zh_CN": "Format displayed in the input box" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaInput", "props": {} }, "description": { "zh_CN": "Format displayed in the input box" } }, { "property": "editable", "label": { "text": { "zh_CN": "The text box can be entered" } }, "required": false, "readOnly": false, "disabled": false, "defaultValue": true, "cols": 12, "widget": { "component": "MetaSwitch", "props": {} }, "description": { "zh_CN": "The text box can be entered" }, "labelPosition": "left" }, { "property": "clearable", "label": { "text": { "zh_CN": "Show clear button" } }, "required": false, "readOnly": false, "disabled": false, "defaultValue": true, "cols": 12, "widget": { "component": "MetaSwitch", "props": {} }, "description": { "zh_CN": "Whether to display the clear button" }, "labelPosition": "left" }, { "property": "readonly", "label": { "text": { "zh_CN": "Read only" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaSwitch", "props": {} }, "description": { "zh_CN": "Whether it is read-only" }, "labelPosition": "left" }, { "property": "disabled", "label": { "text": { "zh_CN": "Disable" } }, "required": false, "readOnly": false, "disabled": false, "cols": 12, "widget": { "component": "MetaSwitch", "props": {} }, "description": { "zh_CN": "Whether it is disabled" }, "labelPosition": "left" } ] } ], "events": { "onUpdate:modelValue": { "label": { "zh_CN": "Triggered when the value of two-way binding changes" }, "description": { "zh_CN": "Trigger when value changes" }, "type": "event", "functionInfo": { "params": [ { "name": "value", "type": "string", "defaultValue": "", "description": { "zh_CN": "Value of two-way binding" } } ], "returns": {} }, "defaultValue": "" } } }, "configure": { "loop": true, "condition": true, "styles": true, "isContainer": false, "isModal": false, "nestingRule": { "childWhitelist": "", "parentWhitelist": "", "descendantBlacklist": "", "ancestorWhitelist": "" }, "isNullNode": false, "isLayout": false, "rootSelector": "", "shortcuts": { "properties": ["size"] }, "contextMenu": { "actions": ["create symbol"], "disable": ["copy", "remove"] } } }

snippets: { "name": { "zh_CN": "Time selector" }, "icon": "time-picker", "screenshot": "", "snippetName": "ElTimePicker", "schema": { "componentName": "ElTimePicker", "props": { "modelValue": 1702785160952 } } }

[ghost]

@youchen133 设计器中是依赖给组件上添加的自定义data-uid属性来匹配选中的组件，画布在渲染schema中组件时会给每个组件添加上生成data-uid。ElTimePicker组件看上去是没有接收额外的属性，导致点击画布中组件时，无法匹配到组件。 在element-plus组件库的playground中试验如下。 源代码如下

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

@youchen133 The designer relies on the custom data-uid attribute added to the component to match the selected component. When the canvas renders the components in the schema, it will add a generated data-uid to each component. The ElTimePicker component does not seem to receive additional attributes, resulting in the component being unable to be matched when clicking on the component in the canvas. Experiment in the playground of element-plus component library as follows. The source code is as follows

[youchen133]

@youchen133 设计器中是依赖给组件上添加的自定义data-uid属性来匹配选中的组件，画布在渲染schema中组件时会给每个组件添加上生成data-uid。ElTimePicker组件看上去是没有接收额外的属性，导致点击画布中组件时，无法匹配到组件。 在element-plus组件库的playground中试验如下。 源代码如下

那这个有什么好的解决方法吗，或者说低代码引擎是否可以针对这种情况进行处理，我现在的做法是自定义了一个组件，用一个div包住element plus的时间组件来解决的，属性进行透传

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

@youchen133 The designer relies on the custom data-uid attribute added to the component to match the selected component. When the canvas renders the components in the schema, it will add a generated data-uid to each component. The ElTimePicker component does not seem to receive additional attributes, resulting in the component being unable to be matched when clicking on the component in the canvas. Experiment in the playground of element-plus component library as follows.  The source code is as follows! [image](https://private-user-images.githubusercontent.com/142570291/291592677-1e46ab4b-1ef9-4de0-aa1a-48c5309ece54.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRod WIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MDMwMzYxNjEsIm5iZiI6MTcwMzAzNTg2MSwicGF0aCI6Ii8xNDI1NzAyOTEvMjkxNT kyNjc3LTFlNDZhYjRiLTFlZjktNGRlMC1hYTFhLTQ4YzUzMDllY2U1NC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBSVdOSllBWDRDU1ZFSDUzQSUyR jIwMjMxMjIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDIzMTIyMFQwMTMxMDFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wODEw MmE4YjFmZDAzYmM3ZDUyNzgxM2M5ODUwYTA5YjNhN2EzNjRmMTkwNThjYThkOWNkOGRkNDlkMzBlODI2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG 9faWQ9MCJ9.n58YFzfbnwu5tlkTWTiqNcyJZelpi3LNzbmbC9mhhng)

So is there any good solution to this, or can a low-code engine handle this situation? My current approach is to customize a component and use a div to wrap the time component of element plus to solve the problem. Perform transparent transmission

[ghost]

这个问题我们记录下来，找下解决方案。你的这个解决方案想法很好，我们也会借鉴。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

We record this problem and find a solution. Your solution idea is very good, we will also learn from it.

[youchen133]

这个问题我们记录下来，找下解决方案。你的这个解决方案想法很好，我们也会借鉴。

好的，我后面也继续看看有没有其他方案

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Let’s record this problem and find a solution. Your solution idea is very good, we will also learn from it.

Okay, I'll continue to see if there are any other options later.