100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue tabs右箭头动态显示隐藏

vue tabs右箭头动态显示隐藏

时间:2021-08-13 21:28:39

相关推荐

vue tabs右箭头动态显示隐藏

需求: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);}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。