tab组件

最新使用滚动条的方式写了tab组件，很新颖，分享记录

需求：

1、tab组件没有占满父级的宽度的时候，如图一，没有左右两侧的icon

2、tab组件占满父级的宽度的时候，如图二，有左右两侧的icon，点击icon可以进行左右移动

3、路由进行变化的时候，此时的路由对应的tab应该显示在可见区域内，即随着路由的变化，tab的可见区域的内容也随着变化

代码：

注：所有使用id找dom的都可以使用ref来替代

html:

<div class="notesParent">
  // 超出父级的宽度的时候显示icon，使用了visibility进行显隐控制
  <i class="el-icon-arrow-left" :style="{visibility: scrollBoole}" @click="inconClick('left')"></i>
  <div class="notesStyle" id="notesStyle">
    // 需要找到具体的tab，所以添加了动态id
    <div v-for="(item, index) in noteData" :key="index" :id="item.id" :class="classObj[index]? 'elseName': 'firstName'" @click="tabClick(item, index)">
      <span>{{item.name}}</span>
      // 第一个tab默认不能关闭
      <img :style="{display: (index === 0? 'none':'inline-block')}" />
    </div>
  </div>
 <i class="el-icon-arrow-right" :style="{visibility: scrollBoole}" @click="inconClick('right')"></i>
</div>

js：

data(){
  return {
    scrollBoole: false,
    notesData: [],
    classObj:{}
  }
},
watch:{
  // 检测tab数据的变化
  '$store.state.commonData.tabArrBase'(newVal){
    this.notesData = newVal
    setTimeout(()=>{
      // 数据变化的时候使用scrollWidth和clientWidth来实时判断滚动条是否存在
      this.scrollBoole = document.querySelect('#notesStyle').scrollWidth - document.querySelect('#notesStyle').clientWidth>0? true: false
    })
  },
  // 路由变化的时候，被选中tab跟路由保持一致
  '$route'(newVal){
     this.notesData.forEach((item, index) => {
          if (newVal.path === item.index) {
            this.startInit()
            this.classObject[index] = true
            setTimeout(() => {
              let chazhi = document.querySelector('#' + item.id).offsetLeft - document.querySelector('#notesStyle').offsetWidth
              if (chazhi > 0) {
                document.querySelector('#notesStyle').scrollLeft = document.querySelector('#notesStyle').scrollLeft + chazhi
              } else {
                document.querySelector('#notesStyle').scrollLeft = 0
              }
            })
          }
        })
  }
},
methods: {
      // 左右icon事件
      iconClick (type) {
        document.querySelector('#notesStyle').scrollLeft = type === 'left'
          ? document.querySelector('#notesStyle').scrollLeft - 15
          : document.querySelector('#notesStyle').scrollLeft + 15
      },
      startInit () {
        this.notedDate.forEach((item, index) => {
          this.$set(this.classObj, index, false)
        })
      },
      // 点击tab
      tabClick (item) {
        this.$route.push({ path: item.index })
      },
      // 删除tab
      closeTab (event, item, index) {
        window.event
          ? window.event.cancelBubble = true
          : event.stopPropagation();
        this.notedDate.splice(index, 1)
      }
    }

 css只写了比较重要的一句，即使用滚动条，当时却隐藏被看不到

 .notesStyle::-webkit-scrollbar {
    width: 6px;
    height: 3px;
    display: none;
  }