SmartCommunity/energyManagement/src/components/common/tabs.vue

<template>
    <div class="tabs">
        <el-radio-group v-model="value" @change="change" :class="size">
            <el-radio-button v-for="(item, index) in tabs" :disabled="item.disabled" :key="index" :label="item.value">{{
                item.label || item.name
            }}</el-radio-button>
        </el-radio-group>
    </div>
</template>
<script>
export default {
    name: 'zz-tabs',
    props: {
        tabs: {
            type: Array,
            default() {
                return [];
            }
        },
        value: {
            type: String,
            default() {
                return '';
            }
        },
        size: {
            type: String,
            default() {
                return '';
            }
        }
    },
    data() {
        return {
            model: ''
        };
    },
    watch: {
        tabs(newVal) {
            this.tabs = newVal;
        }
    },
    methods: {
        change(value) {
            this.$emit('input', value);
            this.$emit('change', value);
        }
    }
};
</script>

<style lang="scss" >
@import '@assets/css/public-style.scss';
.tabs {
    margin: 0 0 20px 20px;
    .el-radio-group {
        .el-radio-button {
            .el-radio-button__inner {
                border: none;
                padding: 0 !important;
                margin-right: 40px;
                box-shadow: none;
                font-size: 16px;
                height: 40px;
                line-height: 37px;
                border-radius: 0;
            }
            .el-radio-button__orig-radio:checked + .el-radio-button__inner {
                background: none !important;
                color: $mainTextColor;
                border: none;
                border-bottom: 3px solid $mainTextColor;
                border-radius: 0;
            }
        }
        &.mini {
            .el-radio-button .el-radio-button__inner {
                font-size: 14px;
                height: 33px;
                line-height: 30px;
            }
        }
    }
}
</style>