【el-tabs标签页】tabs标签页hover时切换

vue2写法

<template>
  <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>
</template>
<script>
export default {
  data () {
    return {
      activeName: 'second'
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.navTabs.$refs.nav.$nextTick(() => {
        console.log('$refs.nav', this.$refs.navTabs.$refs.nav.$el
        )
        // 此时tab的nav才渲染dom 否则拿不到el-tabs__item
        const target = document.getElementsByClassName('el-tabs__item')
        const that = this
        for (let i = 0; i < target.length; i++) {
          target[i].addEventListener('mouseover', () => {
            that.$refs.navTabs.handleTabClick(1, String(i))
          })
        }
      })
    })
  }

}
</script>

vue3写法

<template>  
  <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>  
</template>  
  
<script>  
import { ref, onMounted, nextTick } from 'vue';  
import { ElTabs, ElTabPane } from 'element-plus';  
  
export default {  
  components: {  
    ElTabs,  
    ElTabPane,  
  },  
  setup() {  
    const activeName = ref('second');  
    const navTabs = ref(null);  
  
    onMounted(() => {  
      nextTick(()=>{
        const tabsDOM = navTabs.value.$el.querySelector('.el-tabs__nav-wrap');  
        console.log('$refs.nav',  tabsDOM,navTabs.value)
        if (tabsDOM) {  
        tabsDOM.addEventListener('mouseover', (event) => {  
          console.log('event',  event)
          const target = event.target; 
          console.log('target',  target) 
          target.click()
        });  
      }  
      })
    });  
  
    return {  
      activeName,  
      navTabs,  
    };  
  },  
};  
</script>