enTabs.vue

<template >
  <div class="en-tabs">
    <ul class="ul-wrap">
      <li
        v-for="(item, index) in tabList"
        :key="index"
        :class="isActiveIndex === index ? 'isActive' : ''"
        @click="tabHandle(item, index)"
      >
        <p :class="isActiveIndex === index ? 'isActive show-bar-border' : ''">
          {{ item.label }}
        </p>
      </li>

    </ul>

  </div>
</template>

<script >
import { Tabs } from 'element-ui'
export default {
  name: 'elTabs',
  props: ['tabList'],
  data() {
    return {
      isActiveIndex: 0,
       activeName: 'second'

    }
  },
  methods: {
    tabHandle(item, index) {
      this.isActiveIndex = index
      // this.$emit("tabHandle");
    }
  }
}
</script>

<style scoped lang="scss">
.en-tabs {
  .show-bar-border {
    border-bottom: 2px solid #0097ff;
  }

  // .ul-wrap {
  //   list-style: none;
  //   margin: 0;
  //   padding: 0;
  //   display: flex;
  //   color: #666;
  //   background: rgba(229, 233, 236, 0.5);
  //   border: 1px solid #e5e9ec;
  //   font-size: 14px;
  //   li {
  //     position: relative;
  //     padding: 0 71px;
  //     cursor: pointer;
  //     p {
  //       margin: 0;
  //       padding: 0;
  //       padding-bottom: 14px;
  //       padding-top: 15px;
  //       box-sizing: border-box;
  //     }
  //   }
  //   .isActive {
  //     background: #fff;
  //     color: #0097ff;
  //   }
  // }
}

</style>