tdesign-vue icon indicating copy to clipboard operation
tdesign-vue copied to clipboard

[t-tab] 不支持原生鼠标移入移出事件

Open haojiakui opened this issue 1 year ago • 2 comments

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 avatar Aug 26 '23 08:08 haojiakui

👋 @haojiakui,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

github-actions[bot] avatar Aug 26 '23 08:08 github-actions[bot]

使用事件委托于t-tabs也是无效的

haojiakui avatar Aug 26 '23 08:08 haojiakui