ant design vue在html中创建一个导航菜单
时间: 2023-06-26 09:09:49 浏览: 50
在使用 Ant Design Vue 创建导航菜单时,可以使用 `Menu` 组件和 `Menu.Item` 组件。
首先,需要在 Vue 组件中引入 `Menu` 组件和 `Menu.Item` 组件,代码如下:
```html
<template>
<a-menu :default-selected-keys="['1']" mode="inline">
<a-menu-item key="1">
<a-icon type="user" />
<span slot="title">nav 1</span>
</a-menu-item>
<a-menu-item key="2">
<a-icon type="video-camera" />
<span slot="title">nav 2</span>
</a-menu-item>
<a-menu-item key="3">
<a-icon type="upload" />
<span slot="title">nav 3</span>
</a-menu-item>
</a-menu>
</template>
<script>
import { Menu } from 'ant-design-vue';
import { MenuItem } from 'ant-design-vue';
export default {
components: {
'a-menu': Menu,
'a-menu-item': MenuItem,
},
};
</script>
```
上述代码中,我们使用 `a-menu` 标签来创建一个 `Menu` 组件,然后使用 `a-menu-item` 标签创建多个 `Menu.Item` 组件,每个 `Menu.Item` 组件都有一个唯一的 `key` 属性,用于标识当前选中的菜单项。
`Menu.Item` 组件中可以包含任意 HTML 内容,例如图标和文本,也可以使用 `slot` 属性来设置菜单项的文本内容。
最后,还需要设置 `default-selected-keys` 属性来指定默认选中的菜单项,这里我们设置为 `['1']`,表示默认选中第一个菜单项。同时,还可以使用 `mode` 属性来设置导航菜单的模式,例如 `inline`、`horizontal` 等。