tdesign-vue
tdesign-vue copied to clipboard
[t-tab] 不支持原生鼠标移入移出事件
tdesign-vue 版本
1.63
重现链接
No response
重现步骤
<t-tabs :value="value" @remove="removeTab" @change="changeTab" style="width: 100%" @mouseenter="handleTabMouseEnter($event)" > <t-tab-panel v-for="item in tabPersonList" :key="item.id" :value="item.id" :label="item.name" class="custom-tab-panel" :removable="item.removable" :item="JSON.stringify(item)" @mouseenter="setShowDel(item)" ref="tabPanels" >
{{ item.content }}
期望结果
需求:鼠标移入时动态显示remove
按钮,官方虽然提供了变量用于配置显隐,但是没有提供移入移出事件,使用原生js获取到了dom,但是拿到的却又是panel
项,并不是上方的tabs项,期望暴露tab的移入移出方法
实际结果
mounted() {
this.$nextTick(() => {
this.bindMouseEnterEvent();
});
},
// methods
//初始化时遍历tabs并给其添加`mouseenter`事件
bindMouseEnterEvent() {
const tabPanels = this.$refs.tabPanels;
console.log("tabPanels :>> ", tabPanels);
tabPanels.forEach((tabPanel) => {
console.log("tabPanel :>> ", tabPanel);
tabPanel.$el.addEventListener("mouseenter", (event) => {
const myItem = JSON.parse(tabPanel.$el.getAttribute("item"));
const item = this.tabPersonList.find((v) => v.id === myItem.id);
// 鼠标移入时,动态回显tab的remove按钮
item && this.setShowDel(item);
});
});
},
<t-tabs
:value="value"
@remove="removeTab"
@change="changeTab"
style="width: 100%"
@mouseenter="handleTabMouseEnter($event)"
>
<!-- remove -->
<t-tab-panel
v-for="item in tabPersonList"
:key="item.id"
:value="item.id"
:label="item.name"
class="custom-tab-panel"
:removable="item.removable"
:item="JSON.stringify(item)"
@mouseenter="setShowDel(item)"
ref="tabPanels"
>
<p style="padding: 25px">{{ item.content }}</p>
</t-tab-panel>
</t-tabs>
框架版本
vue2.6
浏览器版本
No response
系统版本
win10
Node版本
14.1.0
补充说明
期望尽快得到回复,非常感谢
👋 @haojiakui,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。
使用事件委托于t-tabs
也是无效的