tab超出部分点击展开和收起动画

<template>
  <!-- 大于55个（包含全部和未分配时增加滚动条，不然页面会很长） -->
  <div class="tabsContainer flex-none" ref="tabsContainer" :class="{ wrap: staffList.length > 55 }">
    <scroll ref="scrollContainer" v-if="!isWrap" direction="horizontal" class="tabsScroll">
      <tabs class="tabs" :tabArr="staffList" :activeTab.sync="activeTabScroll" :isWrap="isWrap" @click="tabsClick">
        <div slot="collapse" class="collapse-box" @touchstart="btnEnter" @touchend="btnleave" @click="wrapChange">
          <i class="iconfont icon-sanjiaoxing up"></i>
        </div>
      </tabs>
    </scroll>
    <div v-else>
      <tabs class="tabs" :tabArr="staffList" :activeTab.sync="activeTabScroll" :isWrap="isWrap" @click="tabsClick">
        <div slot="collapse" class="collapse-box" @touchstart="btnEnter" @touchend="btnleave" @click="wrapChange">
          <i class="iconfont icon-sanjiaoxing up"></i>
        </div>
      </tabs>
    </div>
    <div class="collapse-box" @touchstart="btnEnter" @touchend="btnleave" v-if="!isWrap && staffList.length >= 5" @click="wrapChange">
      <i class="iconfont icon-sanjiaoxing"></i>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { BtnHover } from '@mixin/common.js'
import Scroll from '@base/scroll/scroll.vue'
import Tabs from './tabsIsWrap'
export default {
  name: 'selectBox',
  components: {
    Scroll,
    Tabs
  },
  mixins: [BtnHover],
  props: {
    staffList: {
      type: Array,
      default: ()=>[]
    }
  },
  data() {
    return {
      isWrap: false,
      activeTabScroll: 0,
      height: 3.3
    }
  },
  watch: {
    isWrap() {
      this.scrollChange()
    },
    activeTabScroll() {
      if(this.isWrap){
        this.scrollChange()
      }
    }
  },
  methods: {
    initClick() {
      this.activeTabScroll = 0
      this.isWrap = false
      this.wrapperHeightChange()
    },
    scrollChange() {
      this.$nextTick(()=>{
        if(this.$refs.scrollContainer) {
          this.$refs.scrollContainer.initScroll()
          let ele = document.querySelector(".tabs").firstChild.childNodes[this.activeTabScroll + 1]
          this.$refs.scrollContainer.scrollToElement(ele, 0, 0, 0)
        }
      })
    },
    tabsClick(item, index) {
      this.$emit('click', item, index)
    },
    wrapChange() {
      this.isWrap = !this.isWrap
      this.wrapperHeightChange()
    },
    wrapperHeightChange() {
      const el = this.$refs.tabsContainer
      const dataLength = this.staffList.length
      if (this.isWrap) {
        if (dataLength <= 4) {
          el.style.height = '3.3rem'
        } else {
          // el.style.height = Math.ceil(dataLength / 4) * 3.3 + 'rem'
          if(this.height === 3.3) {
            el.style.height = 'auto'
            this.$nextTick(()=>{
              this.height = el.offsetHeight / 10
              el.style.height = this.height + 'rem'
              console.log(el.offsetHeight)
            })
          } else {
            el.style.height = this.height + 'rem'
          }
        }
      } else {
        el.style.height = '3.3rem'
      }
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.tabsContainer
  background #fff
  margin 0.4rem 0.4rem 0rem
  padding 0 0 0 1.2rem
  border-radius 0.5rem
  position relative
  display flex
  overflow hidden
  max-height calc(100% - 7.5rem - 3.3rem - 4.6rem - 3.7rem - 5.4rem)
  transition height 0.3s ease-in-out
  height 3.3rem
  &.wrap
    overflow auto
  .tabsScroll
    >>>
      .scroll-content
        min-width 100%
        display inline-block
        vertical-align top
  .collapse-box
    display flex
    align-items center
    justify-content center
    width 3.3rem
    height 3.3rem
    box-shadow -5px 0px 10px -4px rgba(153, 153, 153, 0.2)
    z-index 2
    .iconfont
      font-size 1rem
      color #999
      display inline-block
      transform scale(0.42)
      &.up
        transform rotate(-180deg) scale(0.42)
</style>