vue tab 下划线 同步组件模板

演示地址

使用

/**
* @Author: 858834013@qq.com
* @Name: ywsjgl
* @Date: 2022-06-14
* @Desc: 业务数据概览
*/
<template>
  <div class="ywsjgl">
    <div class="ywsjglTop  wow fadeInDown">
      <img class="title" src="../../../assets/ywsjgl.png" alt="">
      <tab :list="tablist" :active.sync="active"></tab>
    </div>
  </div>
</template>

<script>
import tab from "@/components/tab/tab_line_sync";

export default {
  name: "ywsjgl",
  components: {tab},
  props: {
    id: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      status: '',
      active: 0,
      tablist: [{
        name: '本年',
        id: 0,
      }, {
        name: '近3年',
        id: 1,
      }, {
        name: '近5年',
        id: 2
      }]
    }
  },
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.ywsjgl {
  width: calc(2866px - 141px);
  margin-left: 141px;

  .ywsjglTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .title {
      img {
        width: 352px;
      }
    }
  }
}
</style>

组件代码

/**
* @Author: 858834013@qq.com
* @Name: tabs
* @Date: 2022-6-14
* @Desc: https://www.wanjunshijie.com/note/vue/3185.html

*/
<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.name }}</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-end;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 750px;
  margin: auto;

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

    span {
      font-size: 39px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
    }

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

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

    .line {
      background: #0DF9E6;
    }
  }
}
</style>

演示地址

vue 超大屏案例 机电工程 8160*2160