index.vue

<template>
  <section :class="[cusClass,overFlow]" class="hls-switch-tab" >
    <section :style="transform" class="tab-content">
      <slot/>
    </section>
  </section>
</template>
<script>
import { base } from '../../common/mixins'
import stabItem from './tab-item'

export default {
  name: 'STab',
  mixins: [base],
  component: { stabItem },
  props: {
    value: {
      type: Number,
      default: 0,
    },
    position: {
      type: String,
      default: 'top',
    },
    cusClass: {
      type: String,
      default: '',
    },
    defaultActive: {
      type: Number,
      default: 0,
    },
    showDivider: {
      type: Boolean,
      default: false,
    },
    overflowX: {
      type: Boolean,
      default: true,
    },
    hasBorder: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      items: [],
      length: '',
      activedIndex: '',
      translate: 0,
    }
  },
  computed: {
    overFlow () {
      return this.overflowX ? 'auto-overflow-x' : ''
    },
    count () {
      this.length = this.items.length
      return this.length
    },
    current () {
      let vm = this
      let length = (vm.items.length) - 1
      if (vm.defaultActive > length) {
        vm.index = length
      } else {
        vm.index = vm.defaultActive
      }
      return vm.index
    },

    transform () {
      return {
        transform: 'translateX(' + this.translate + 'px' + ')',
        // transition: 'right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;',
      }
    },
  },
  watch: {
    value (value) {
      if (value > this.count - 1) {
        throw 'tab index out of bound exception'
      } else {
        this.defaultActive === value
        this.setTabActive(value)
      }
    },
  },
  mounted () {
    let vm = this
    if (vm.value > vm.count - 1) {
      throw 'tab index out of bound exception'
    } else {
      vm.setTabActive(vm.value)
    }
  },
  methods: {
    setTabActive (index) {
      let vm = this
      vm.items.forEach(item => {
        item.$el.classList.remove('activated')
      })
      setTimeout(() => {
        this.items[index].$el.classList.add('activated')
      }, 100)
      let width = this.items[index].$el.clientWidth
      this.actived(index, width)
    },
    actived (index, clientWidth) {
      this.activedIndex = index
      this.$emit('tabClick', index)
      this.$emit('input', index)

      this.scrollToActiveTab(index, clientWidth)
    },

    scrollToActiveTab (index, width) {
      let clientWidth = this.$el.clientWidth
      index += 1
      let vm = this
      let count = Math.floor(clientWidth / width)
      let overFlowWidth = clientWidth - count * width
      let num
      if (index > count) {
        num = index - count
        if ((vm.count - index) >= 1) {
          num += 1
        }
      } else {
        num = 0
      }
      if (num === 0) {
        vm.translate = 0
      } else {
        vm.translate = -num * width + overFlowWidth
      }
    },
  },
}
</script>

<style lang="less">
  .auto-overflow-x {
    overflow-x: auto;
  }

  .hls-switch-tab {
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    // justify-content: space-around;
    height: 40px;
    background-color: #fff;

    &-top {
     // top: 0;

      &:after {
        .setBottomLine();
      }
    }

    &-bottom {
     // bottom: 0;

      &:before {
        .setTopLine();
      }
    }

    .setTopLine(@c: rgba(0,0,0,.1)) {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 1px;
      border-top: 1px solid @c; /*no*/
      color: @c;
      transform-origin: 0 0;
      transform: scaleY(0.5);
    }

    .setBottomLine(@c: rgba(0,0,0,.1)) {
      content: " ";
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      height: 1px;
      border-bottom: 1px solid @c; /*no*/
      color: @c;
      transform-origin: 0 100%;
      transform: scaleY(0.5);
    }
  }

</style>