需求:elementui 标签页多个情况下,自带左右标签,当右标签滑动到最后一个的时候隐藏,左箭头同。
注意:查找实例会有时差,可以使用定时器延迟下。
isRightArrow(){this.$nextTick(() => {// 找出下面对应的nav实例function findTabNavVue (vueStance) {const childrens = vueStance.$childrenconst len = childrens.lengthfor (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 nextNodelet nextNode2navVue.$watch('navOffset', function (currentOffset){var navSize = this.$refs.nav['offsetWidth'];var containerSize = this.$refs.navScroll['offsetWidth'];const isRight = navSize - currentOffset <= containerSizeconst isLeft = currentOffset == 0nextNode = 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' : ''})}})},
// 获取所有tabthis.tabDatas = res[6].dataif(this.tabDatas.lenght != 0){setTimeout(() => {this.isRightArrow()}, 300);}