search

Moonofweisheng / wot-design-uni

一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。
https://wot-design-uni.pages.dev
MIT License
887 stars 144 forks source link

[Bug 上报] tooltip 组件一个页面超过一个组件时，出现问题。 #583

Open ecfxs opened 2 weeks ago

ecfxs commented 2 weeks ago

Wot Design Uni 版本号

1.3.6

平台

h5, 微信小程序, 支付宝小程序, APP, 钉钉小程序, 其他小程序

复现Demo地址（如不提供，issue将被直接关闭）

无

重现步骤

<view class="demo-1">
    <wd-tooltip @change="handleChange" placement="top" content="top 提示文字">
        <wd-button class="demo-button">demo1</wd-button>
    </wd-tooltip>
</view>
<view class="demo-2">
    <wd-tooltip @change="handleChange" placement="top" content="top 提示文字">
        <wd-button>demo2</wd-button>
    </wd-tooltip>
</view>
.demo-1, demo-2
   margin: 0 10px;
   width: 100px;
   position: relative;
   .demo-button
         width: 100px;

期望的结果是什么？

image

实际的结果是什么？

实际结果 image

因为页面中重复ID，导致useQueue查询出来的元素宽高不正确。显示错位。

环境信息

No response

其他补充信息

id="tooltip" 在 wd-tooltip.vue 中固定了ID ，如果一个页面中多次引用组件，会导致第一个组件显示正常，后续组件均会显示错误。目前自己的临时解决办法是在 props 中临时传递个 key 作为 id 的临时标题。如果检测到没传入key，

const uniqueId = String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
const selector : string = 'tooltip-' + uniqueId

取个随机不重复的 ID 给 id , 页面中不应该重复出现相同的ID。希望作者能优化下这个问题。

Moonofweisheng commented 2 weeks ago

可以提供更详细一点的复现demo吗，因为我使用issue中的代码没有复现出相关问题。多谢！

ecfxs commented 2 weeks ago

可以提供更详细一点的复现demo吗，因为我使用issue中的代码没有复现出相关问题。多谢！

          <view class="demo">
        <view class="demo-1">
            <wd-tooltip placement="top-start" useContentSlot>
                <view class="help">
                    <wd-icon name="help-circle" size="14px"></wd-icon> 帮助说明
                </view>
                <template #content>
                    <view class="help-main">
                        demo-1
                    </view>
                </template>
            </wd-tooltip>
        </view>
        <view class="demo-2">
            <wd-tooltip placement="top-start" useContentSlot>
                <view class="help">
                    <wd-icon name="help-circle" size="14px"></wd-icon> 帮助说明
                </view>
                <template #content>
                    <view class="help-main">
                        demo-2
                    </view>
                </template>
            </wd-tooltip>
        </view>
    </view>
         .demo {
        padding: 150px 30px;
        position: relative;

        .demo-1,
        .demo-2 {
            position: relative;
        }
    }

image

image