tab组件

<!--  -->
<template>
  <div class='contenttab'>
    <div class="box">
      <div class="tabList">
        <div v-for="item, index in list" :key="item.id" :class="{ 'active': tabIndex == index }"
          @click="changeTabIndex(item.index, index)">

          {{ item.title }}
        </div>

      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    list: {
      type: Array
    }
  },
  name: '',
  components: {},
  data() {
    return {
      tabIndex: 0,

    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    changeTabIndex(idx, index) { //点击事件传过来一个下标值，通过下标值改变tabIndex的值，动态改变样式
      this.tabIndex = index
      this.$emit('changindex', index)
      console.log(' this.componentTag====>', idx, index, this.componentTag);
    }
  },
  created() {

  },
  mounted() {

  },
}
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 40px;

}

.tabList {
  width: 100%;
  display: flex;
  height: 40px;
}

div {
  list-style: none;
  // border: 1px solid;
  flex: 1;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  border-radius: 8px;

}

.active {
  /*定义选中之后的状态 */
  background: rgb(0, 110, 255);
  color: white;
}
</style>