MTP2.0_WEB/src/common/components/firstMenu/index.vue

<template>
    <div class="first-menu">
        <a-menu
            class="a-menu_container"
            theme="dark"
            v-model:selectedKeys="current"
            @click="menuClick"
            mode="horizontal"
        >
            <a-menu-item :key="String(index)" v-for="(item, index) in list">{{ item[value] }}</a-menu-item>
        </a-menu>
        <div class="menu_right">
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watchEffect } from 'vue';

interface Key {
    [propName: string]: string;
}

export default defineComponent({
    name: 'first-menu',
    emits: ['selectMenu'],
    props: {
        list: {
            default: [],
            type: Object as PropType<Key[]>,
        },
        value: {
            // 需要绑定的值得 key
            default: '',
            type: String,
        },
        selectedKey: {
            default: ['0'],
            type: Array as PropType<string[]>,
        },
    },
    components: {},
    setup(props, context) {
        const current = ref<string[]>(['0']);
        watchEffect(() => {
            current.value = props.selectedKey;
        });
        function menuClick(value: any) {
            const index = +value.key;
            context.emit('selectMenu', props.list[index]);
        }
        return {
            current,
            menuClick,
        };
    },
});
</script>

<style lang="less">
.noBorderBottom {
    border-bottom: none;
}
</style>;