Ant Design Vue3 + TypeScript + Vite 左侧菜单生成

Ant Design Vue3提供了Menu组件用于生成左侧菜单,我们可以使用Menu组件来构建左侧菜单。下面是一个示例:




在上面的示例中,我们使用了a-menua-sub-menua-menu-item三个组件来构建菜单,其中a-menu组件的default-selected-keys属性用于设置默认选中的菜单项,default-open-keys属性用于设置默认展开的子菜单项。在a-sub-menu组件中,我们使用了v-if指令来控制是否显示子菜单项,这里可以根据用户权限来控制显示或隐藏。最后在setup函数中使用useRoute钩子获取当前路由信息,根据路由信息来设置当前选中的菜单项。

当然,这只是一个简单的示例,实际使用中需要根据具体的需求进行调整。

你可能感兴趣的:(vue+typescript,typescript,vue.js)