diagnosis.admin/src/components/IndexBar.vue

<template>
    <div class="index_bar flex-column">
        <div :class="index==current?'active':''" v-for="(item,index) in index_data" :key="index"
            @click="inBarChange(index)">
            {{item}}</div>
    </div>
</template>
<script>
    export default {
        props: {
            current: {
                type: Number || String,
                default: 0
            },
            index_data: {
                type: Array,
                default: () => {
                    return ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'M', 'N', 'O', 'P', 'Q', 'R',
                        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
                    ]
                }
            },

        },
        methods: {
            inBarChange(index) {
                let obj = {
                    index: index,
                    text: this.index_data[index]
                }
                this.$emit('change', obj)
            }
        }

    }
</script>
<style lang="scss" scoped>
    @import '../style/common.scss';

    .index_bar {
        width: 100%;

        div {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            margin-bottom: 5px;
            margin: 0 auto 3px;
        }

        .active {
            width: 22px;
            height: 22px;
            background: #16D1BA;
            border-radius: 2px;
            color: #fff;
            text-align: center;

        }
    }
</style>