自定义Tabs标签页组件（vue）

不知道有没有和我一样项目中用的到Ant Design of Vue的Tabs组件在测试环境上打包时是无效的，于是手写个组件

我会写在src的componets下

我所用到的传值都是用类型1或2来判断或者中英文

父组件

<template>
  <div>
    <!-- 操作tab区域 -->
    <div class="tab-box">
      <div
        class="tab-item"
        v-for="(item, index) in tabName"
        :key="index"
        :class="{tabActive:tabCode == index}"
        @click="getTab(index)"
      >{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['tabName', 'type'],
  data() {
    return {
      tabCode: 0,
      //   tabName: ['tab1', 'tab2'],
      send: 1
    }
  },
  mounted() {},
  methods: {
    getTab(index) {
      this.tabCode = index
      if (index == 0) {
        // this.type = 1
        if (typeof this.type == 'string') {
          this.send = 'CN'
        } else {
          this.send = 1
        }
        this.$emit('typeFn', this.send)
      } else {
        if (typeof this.type == 'string') {
          this.send = 'EN'
        } else {
          this.send = 2
        }
        this.$emit('typeFn', this.send)
      }
      // console.log('this.type: ', this.send)
      //   this.$emit('typeFn', this.type)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-box {
  display: flex;
  margin-bottom: 18px;
  .tab-item {
    width: 100px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    border: 1px solid #1890ff;
  }
  .tabActive {
    background-color: #1890ff;
    color: #fff;
  }
}
</style>

子组件

<template>
 <TabBar :tabName="tabName" :type="subject" @typeFn="typeFn" />
</template>

<script>
import TabBar from '@/components/TabBar'
export default {
  components: { TabBar },
   data() {
   subject: 'CN' //定义你需要的
   }
}
 methods: {
 typeFn(value) {
      this.subject = value; //写你的逻辑
    }
 }
 
</script>