vue tabs右箭头动态显示隐藏_el-tabs__nav-prev

需求：elementui 标签页多个情况下，自带左右标签，当右标签滑动到最后一个的时候隐藏,左箭头同。
注意：查找实例会有时差，可以使用定时器延迟下。

isRightArrow(){
      this.$nextTick(() => {
        // 找出下面对应的nav实例
        function findTabNavVue (vueStance) {
          const childrens = vueStance.$children
          const len = childrens.length
          for (let i = 0; i < len; i ++ ) {
            const child = childrens[i]
            if (child.scrollNext) return child
          }
        }
        const navVue = findTabNavVue(this.$refs.tabs)
        if(navVue.$el.querySelector('.el-tabs__nav-prev')){
          navVue.$el.querySelector('.el-tabs__nav-prev').style.visibility = 'hidden'
        }
        if (navVue.scrollable) {
          let nextNode
          let nextNode2
          navVue.$watch('navOffset', function (currentOffset){
            var navSize = this.$refs.nav['offsetWidth'];
            var containerSize = this.$refs.navScroll['offsetWidth'];
            const isRight = navSize - currentOffset <= containerSize
            const isLeft = currentOffset == 0
            nextNode = nextNode ? nextNode : navVue.$el.querySelector('.el-tabs__nav-next')
            nextNode.style.visibility = isRight ? 'hidden' : ''

            nextNode2 = nextNode2 ? nextNode2 : navVue.$el.querySelector('.el-tabs__nav-prev')
            nextNode2.style.visibility = isLeft ? 'hidden' : ''
          })
        }
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// 获取所有tab
 this.tabDatas = res[6].data
 if(this.tabDatas.lenght != 0){
   setTimeout(() => {
     this.isRightArrow()
   }, 300);
 }
1
2
3
4
5
6
7