vue3+ant-design-vue+typescript实现导航菜单组件

<template>
  <a-menu
    mode="horizontal"
    :selectedKeys="[current]"
    :openKeys="openKeys"
    @openChange="onOpenChange"
    @select="onSelect"
  >
    <a-sub-menu v-for="item in menuData" :key="item.key" :title="item.title">
      <template #title>
        <span>{{ item.title }}</span>
      </template>
      <a-menu-item v-for="subItem in item.children" :key="subItem.key">
        <router-link :to="subItem.key">{{ subItem.title }}</router-link>
      </a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Menu } from 'ant-design-vue';
 
export default defineComponent({
  components: {
    'a-menu': Menu,
    'a-sub-menu': Menu.SubMenu,
    'a-menu-item': Menu.Item,
  },
  setup() {
    const current = ref('/');
    const openKeys = ref([]);
    const onOpenChange = (keys: string[]) => {
      openKeys.value = keys;
    };
    const onSelect = (key: string) => {
      current.value = key;
    };
 
    const menuData = [
      {
        key: '/',
        title: '首页',
        children: [
          { key: '/', title: '首页' },
        ],
      },
      {
        key: '/users',
        title: '用户管理',
        children: [
          { key: '/users/list', title: '用户列表' },
          { key: '/users/add', title: '添加用户' },
        ],
      },
    ];
 
    return {
      current,
      openKeys,
      onOpenChange,
      onSelect,
      menuData,
    };
  },
});
</script>

这个代码实例展示了如何使用Vue 3、Ant Design Vue和TypeScript来创建一个水平导航菜单。它包括了子菜单的使用，以及如何处理打开状态和选中状态的变化。这个例子可以作为开发者实现类似导航菜单功能时的参考。