hb_sis_zhfx/src/components/coms/btn/btn-group.vue

<template>
    <div class="btn-group-with-icon">
        <i v-if="showIcon" :class="icon"></i>
        <a href="javascript:;" v-for="(btn, index) of btns" :key="btn" @click="click(index)"
            :class="{ active: activeIndex == index }">
            {{btn.text}}
        </a>
    </div>
</template>

<script>
    export default {
        // 名称
        name: "BtnGroup",
        // 传入参数
        props: {
            // 图标
            icon: String,
            // 按钮的数组
            /**
             * {
                    text: "某某风场",
                }
             */
            btns: Array,
            // 默认选中第几个
            index: {
                type: Number,
                default: 0
            }
        },
        // 自定义事件
        emits: {
            // 选中事件
            select: null
        },
        // 数据
        data() {
            return {
                showIcon: false,
                activeIndex: 0,
            }
        },
        // 函数
        methods: {
            click: function(index) {
                this.activeIndex = index;
                this.$emit('select', index, this.btns[index]);
            }
        },
        // 生命周期钩子
        beforeCreate() {
            // 创建前
        },
        created() {
            // 创建后
        },
        beforeMount() {
            // 渲染前
        },
        mounted() {
            // 渲染后
            if (this.icon && this.icon != "") {
                this.showIcon = true;
            } else {
                this.showIcon = false;
            }
            this.activeIndex = this.index;
        },
        beforeUpdate() {
            // 数据更新前
        },
        updated() {
            // 数据更新后
        },
    }
</script>

<style lang="less">
    .btn-group-with-icon {
        display: flex;
        flex-direction: row;

        i {
            color: @gray;
            margin-right: 0.556vh;
        }

        a {
            text-decoration: none;
            color: @gray;
            margin-right: 0.278vh;
            border: 1px solid @gray;
            border-radius: 2px;
            width: 9.815vh;
            height: 2.13vh;
            line-height: 2.13vh;
            text-align: center;
            font-size: 1.111vh;

            &:last-child {
                margin-right: 0;
            }

            &.active {
                color: @write;
                background-color: @darkBlue;
            }
        }
    }
</style>