opentiny
🐛 [Bug]: TinyTooltip 直接使用 children 作为组件的根节点，会导致唯一属性被覆盖
Version
latest
Vue Version
latest
Link to minimal reproduction
Step to reproduce
场景描述：
- 我们是 TinyEngine 低代码场景。
- 在画布的时候，我们希望区分 TinyTooltip 节点与默认插槽的 div 节点。并且通过
data-uid属性来区分。
示例代码：
<tiny-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start" :manual="true" :modelValue="true" data-uid="aaaa">
<div data-uid="bbb">
<div>
<tiny-button>上左</tiny-button>
</div>
</div>
<template #content>
<div>
fdsafsa
</div>
</template>
</tiny-tooltip>
- 实际上， TinyTooltip 是个空节点，直接使用了默认插槽的 div 节点作为根节点进行渲染。导致实际上 只有 TinyTooltip 属性上的 data-uid 生效了。但是默认插槽 div 的 data-uid 属性没有生效。
What is expected
No response
What is actually happening
No response
What is your project name
TinyEngine
Any additional comments (optional)
No response
Bot detected the issue body's language is not English, translate it automatically.
Title: 🐛 [Bug]: TinyTooltip uses children directly as the root node of the component, which will cause the unique attribute to be overwritten.
感谢您提供详细的描述和示例代码。根据您的描述，问题似乎是由于 TinyTooltip 组件直接使用了默认插槽的 div 节点作为根节点进行渲染，导致默认插槽 div 的 data-uid 属性没有生效。
要解决这个问题，可能需要对 TinyTooltip 组件的实现进行一些调整，以确保默认插槽的属性不会被覆盖。具体的解决方案可能涉及到组件内部的渲染逻辑调整。
我建议您可以尝试以下方法：
-
检查组件实现：查看
TinyTooltip组件的实现，确保在渲染时没有覆盖默认插槽节点的属性。 -
自定义渲染逻辑：如果可能，修改
TinyTooltip的渲染逻辑，使其能够保留默认插槽节点的所有属性。 -
使用其他属性：如果无法修改组件实现，考虑使用其他属性或方法来区分节点。
如果您需要进一步的帮助或有其他问题，请随时告诉我。
🪧 Tips
For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.![petercat-assistant[bot] avatar](https://avatars.githubusercontent.com/in/875736?v=4 "Published by a pub.dev verified publisher"){kind=small}
Bot detected the issue body's language is not English, translate it automatically.
Thank you for the detailed description and sample code. According to your description, the problem seems to be because the TinyTooltip component directly uses the div node of the default slot as the root node for rendering, resulting in the data-uid property of the default slot div does not take effect.
To resolve this, some tweaks may be required to implement the TinyTooltip component to ensure that the properties of the default slot are not overwritten. Specific solutions may involve rendering logic adjustments inside components.
I suggest you try the following:
-
Check component implementation: Check the implementation of the
TinyTooltipcomponent to ensure that the properties of the default slot node are not overwritten during rendering. -
Custom rendering logic: If possible, modify the rendering logic of
TinyTooltipso that it can retain all properties of the default slot node. -
Use other properties: If the component implementation cannot be modified, consider using other properties or methods to distinguish nodes.
If you need further assistance or have other questions, feel free to let me know.
🪧 Tips
For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.
It seems like the issue with the TinyTooltip component is due to it using the div node of the default slot as the root node for rendering, which causes the data-uid property of the default slot div to not take effect. Here are some suggestions to address this:
-
Check Component Implementation: Review the implementation of the
TinyTooltipcomponent to ensure that the properties of the default slot node are preserved during rendering. -
Custom Rendering Logic: If feasible, adjust the rendering logic of
TinyTooltipto retain all properties of the default slot node. -
Use Other Properties: If modifying the component implementation is not possible, consider using alternative properties or methods to differentiate nodes.
If you need further assistance or have additional questions, feel free to reach out.
🪧 Tips
For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.
Bot detected the issue body's language is not English, translate it automatically.
Not yet possible. It turns out that tooltip is designed like this, it is like an empty component, without actual dom components. It just wants to pop it out.
Popover is recommended
Bot detected the issue body's language is not English, translate it automatically.
Plan to refactor tooltip