vue 使用按钮实现组件切换

<div>
    <el-button size="mini" type="info" @click="handleLineBtns(item)"
        :class="lineComName == item.comName ? 'active' : 'default'" v-for="(item, index) in lineBtns"
        :key="index">{{ item.btnName }}</el-button>
</div>
<div class="component-panel">
    <component :is="lineComName"></component>
</div>

<script>
import Circuit from "@/views/manager/data/line/Circuit.vue";
import Slope from "@/views/manager/data/line/Slope.vue";
import Station from "@/views/manager/data/line/Station.vue";

export default {
    components: {
        Circuit,
        Slope,
        Station
    },
    data() {
        return {
            lineBtns: [
                { id: 1, btnName: "线路数据", comName: 'Circuit' },
                { id: 2, btnName: "坡度数据", comName: 'Slope' },
                { id: 3, btnName: "车站数据", comName: 'Station' }
            ],
            lineCurrent: 1,
            lineComName: 'Circuit'

        };
    },
    methods: {
        
        handleLineBtns(item) {
            this.lineCurrent = item.index
            this.lineComName = item.comName
        },
        
    }
};

</script>


<style scoped>

.default {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid;
    border-image: linear-gradient(228deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
    color: #fff;
}

.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(24, 236, 223, 0.6) 0%, rgba(24, 236, 223, 0) 100%);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid;
    border-image: linear-gradient(228deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
}
 
</style>