carInsightSystem/src/components/v-tab-group/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-08 19:06:37
 * @LastEditTime: 2021-10-28 11:11:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/components/v-tab-group/index.vue
-->
<template>
    <div class="v-t-g-container" ref="V-t-g">
        <template v-for="(item,index) in btns">
            <span v-if="activeInex === index" class="v-g-item v-g-item-active" :key="index" @click="handlerClick(index)">{{item}}</span>
            <span v-else class="v-g-item" :key="index" @click="handlerClick(index)">{{item}}</span>
        </template>
    </div>
</template>

<script>
export default {
    name: "v-tab-group",
    props: {
        value: {
            type: Number,
            default: 0
        },
        btns: {
            type: Array,
            default: () => []
        }, 
    },
    watch: {
        value: {
            handler(val) {
                this.activeInex = val
            },
            immediate: true
        }
    },
    data() {
        return {
            activeInex: 0
        }
    },
    methods: {
        handlerClick(n) {
            this.activeInex = n;
            // this.$emit('update:value', this.activeInex)
            this.$emit('change', this.activeInex);
        }
    }
}
</script>

<style lang="less" scoped>
.v-t-g-container {
    display: inline-block;
    background: #1B4163;
    padding: 3px;
    border-radius: 2px;
    font-size: 14px;
    .v-g-item {
        display: inline-block;
        padding: 2px 10px;
        color: #63AECC;
        text-align: center;
        cursor: pointer;
        border-radius: 2px;
    }
    .v-g-item-active {
        background: linear-gradient(180deg, #00498C 0%, #002343 100%);
        border: 1px solid #63AECC;
    }
}
.v-light-container {
    display: inline-block;
    background: #FFF;
    padding: 3px;
    border-radius: 2px;
    font-size: 14px;
    border: 1px solid #1EC8FA;
    .v-g-item {
        display: inline-block;
        padding: 2px 10px;
        text-align: center;
        color: #000;
        cursor: pointer;
        border-radius: 2px;
    }
    .v-g-item-active {
        background: #E7F1FF;
        border: 1px solid #63AECC;
        color: #000
    }
}
</style>