修改elementUi的tabs組件,使得點擊事件變為hover事件觸發


<el-tabs
          ref="navTabs"
          tab-position="left"
          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));
          });
        }
      });
    });
  },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM