模仿tabs标签页切换(简单封装-可以根据需求改)

<template>
    <div class="tabs">
        <div class="line"></div>
        <div ref="tabs" class="tab_item" :class="{active_item:ActiveIndex == index}" v-for="(item,index) in tabList" :key="index" @click="ActiveItem(index)">{{ item }}</div>
    </div>
</template>

<script>
export default {
    props:{
        TabIndex:{
            type:Number,
            default:()=>0
        }
    },
    data() {
        return {
            ActiveIndex: this.TabIndex,
            tabList: ["标签1", "标签测试2", "标签测试3", "标签字数测试4"],
        };
    },
    mounted() {
        this.ActiveItem(this.ActiveIndex);
    },
    methods: {
        ActiveItem(index) {
            let line = document.querySelector(".line");
            this.ActiveIndex = index;
            let countWidth = 0;
            line.style.width = `${this.$refs.tabs[index].offsetWidth}px`;
            if (index == 0) {
                countWidth = 0;
            } else {
                for (let i = 0; i < index; i++) {
                    countWidth += this.$refs.tabs[i].offsetWidth + 10;
                }
            }
            line.style.transform = `translateX(${countWidth}px)`;
        },
    },
    computed:{
    }
};
</script>

<style lang="scss" scoped>
.tabs {
    display: flex;
    position: relative;
    .tab_item {
        padding: 5px 10px;
        cursor: pointer;
        text-align: center;
        margin-left: 10px;
    }
    .active_item {
        color: #409eff;
    }
    .line {
        position: absolute;
        left: 10px;
        bottom: 0;
        height: 2px;
        background-color: #409eff;
        border-radius: 10px;
        transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
}
</style>

组件使用
TabIndex:默认选择的标签

<Tabs :TabIndex='1'></Tabs>