ElementUI中的tabs组件在vue页面中将默认点击事件改为鼠标hover事件触发

作者:我就是个世界 发表于:2025-09-15
        <el-tabs
          ref="navTabs"
          tab-position="top"
          style="height: 200px;"
          type="border-card"
        >
          <el-tab-pane label="用户管理">
            <a href="https://www.baidu.com/" target="_self">百度</a>
          </el-tab-pane>
          <el-tab-pane label="配置管理">配置管理</el-tab-pane>
          <el-tab-pane label="角色管理">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
        </el-tabs>
mounted() {
    this.$nextTick(() => {
      this.$refs.navTabs.$refs.nav.$nextTick(() => {
        // 此时tab的nav才渲染dom 否则拿不到el-tabs__item
        var target = document.getElementsByClassName("el-tabs__item");
        let that = this;
        for (let i = 0; i < target.length; i++) {
          target[i].addEventListener("mouseover", () => {
            that.$refs.navTabs.handleTabClick(1, String(i));
          });
        }
      });
    });
  },


版权声明

本文仅代表作者观点,未经许可,不得转载。

分享:

扫一扫在手机阅读、分享本文

请发表您的评论