vue3 数据可视化大屏 项目中需要tab切换效果，之前写过类似的效果了，vue tab_line_sync 组件，不过是vue2的方式写的，vue3的sync已经不能用了，所以重新再写一遍。

使用

<template>
  <div class="itemBodys">
    <tab v-model:active="active" :list="tabList"></tab>
  </div>
</template>

<script>
import tab from '@/components/tab.vue'

export default {
  name: "title",
  data() {
    return {
      active: 0,
      tabList: [{
        title: '今日发电趋势',
        id: 0
      }, {
        title: '今日实时功率趋势',
        id: 1
      },]
    }
  },
  components: {tab},
  watch: {},
  mounted() {
    var that = this;
  },
}
</script>

<style lang="scss" scoped>
.itemBodys {
  position: relative;
  width: calc(100% - 40px);
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  
}
</style>

组件代码

/**
* @Author: 858834013@qq.com
* @Name: tabs
* @Date: 2023年03月02日
* @Desc:

*/
<template>
  <div class="tabs">
    <div class="tab cur" :class="{active:active==item.id}" @click="getactive(item.id)" v-for="(item,index) in list"
         :key="index"><span>{{ item.title }}</span>
      <div class="line"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tabs",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    active: {
      type: Number,
      default() {
        return 0;
      }
    },
  },
  methods: {
    getactive(e) {
      this.$emit('update:active', e)
    },
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;

  .tab {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    position: relative;
    height: 40px;
    margin-right: 20px;
    cursor: pointer;

    span {
      font-size: 16px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #97A3B8;
    }

    .line {
      background: rgba(54, 107, 229, 0);
      border-radius: 1px;
      position: absolute;
      bottom: 1px;
      width: 100%;
      height: 1px;
    }
  }

  .tab.active {
    span {
      color: #0DF9E6;
    }

    .line {
      background: rgba(17, 255, 254, 1);
    }
  }
}
</style>