118 lines
3.4 KiB
Markdown
118 lines
3.4 KiB
Markdown
|
<cn>
|
||
|
|
#### 单文件递归菜单
|
||
|
|
使用单文件方式递归生成菜单。
|
||
|
|
Before v2.0, 因组件内部会动态更改`a-sub-menu`的属性，如果拆分成单文件，无法将属性挂载到`a-sub-menu`上，你需要自行声明属性并挂载。为了方便，避免属性的声明，我们推荐使用函数式组件。
|
||
|
|
</cn>
|
||
|
|
|
||
|
|
<us>
|
||
|
|
#### Single file recursive menu
|
||
|
|
Use the single file method to recursively generate menus.
|
||
|
|
Before v2.0, The properties of `a-sub-menu` are dynamically changed inside the component. If you split the file into a single file and you cannot mount the `props` to `a-sub-menu`, you need to declare the `props` and mount it yourself. For convenience, to avoid the declaration of attributes, we recommend using functional components.
|
||
|
|
</us>
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
<div style="width: 256px">
|
||
|
|
<a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
|
||
|
|
<a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
|
||
|
|
</a-button>
|
||
|
|
<a-menu
|
||
|
|
:default-selected-keys="['1']"
|
||
|
|
:default-open-keys="['2']"
|
||
|
|
mode="inline"
|
||
|
|
theme="dark"
|
||
|
|
:inline-collapsed="collapsed"
|
||
|
|
>
|
||
|
|
<template v-for="item in list">
|
||
|
|
<a-menu-item v-if="!item.children" :key="item.key">
|
||
|
|
<a-icon type="pie-chart" />
|
||
|
|
<span>{{ item.title }}</span>
|
||
|
|
</a-menu-item>
|
||
|
|
<sub-menu v-else :key="item.key" :menu-info="item" />
|
||
|
|
</template>
|
||
|
|
</a-menu>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// recommend use functional component
|
||
|
|
// <template functional>
|
||
|
|
// <a-sub-menu :key="props.menuInfo.key">
|
||
|
|
// <span slot="title">
|
||
|
|
// <a-icon type="mail" /><span>{{ props.menuInfo.title }}</span>
|
||
|
|
// </span>
|
||
|
|
// <template v-for="item in props.menuInfo.children">
|
||
|
|
// <a-menu-item v-if="!item.children" :key="item.key">
|
||
|
|
// <a-icon type="pie-chart" />
|
||
|
|
// <span>{{ item.title }}</span>
|
||
|
|
// </a-menu-item>
|
||
|
|
// <sub-menu v-else :key="item.key" :menu-info="item" />
|
||
|
|
// </template>
|
||
|
|
// </a-sub-menu>
|
||
|
|
// </template>
|
||
|
|
// export default {
|
||
|
|
// props: ['menuInfo'],
|
||
|
|
// };
|
||
|
|
import { Menu } from 'ant-design-vue';
|
||
|
|
const SubMenu = {
|
||
|
|
template: `
|
||
|
|
<a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
|
||
|
|
<span slot="title">
|
||
|
|
<a-icon type="mail" /><span>{{ menuInfo.title }}</span>
|
||
|
|
</span>
|
||
|
|
<template v-for="item in menuInfo.children">
|
||
|
|
<a-menu-item v-if="!item.children" :key="item.key">
|
||
|
|
<a-icon type="pie-chart" />
|
||
|
|
<span>{{ item.title }}</span>
|
||
|
|
</a-menu-item>
|
||
|
|
<sub-menu v-else :key="item.key" :menu-info="item" />
|
||
|
|
</template>
|
||
|
|
</a-sub-menu>
|
||
|
|
`,
|
||
|
|
name: 'SubMenu',
|
||
|
|
// must add isSubMenu: true
|
||
|
|
isSubMenu: true,
|
||
|
|
props: {
|
||
|
|
...Menu.SubMenu.props,
|
||
|
|
// Cannot overlap with properties within Menu.SubMenu.props
|
||
|
|
menuInfo: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({}),
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
'sub-menu': SubMenu,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
collapsed: false,
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
title: 'Option 1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
title: 'Navigation 2',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
key: '2.1',
|
||
|
|
title: 'Navigation 3',
|
||
|
|
children: [{ key: '2.1.1', title: 'Option 2.1.1' }],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
toggleCollapsed() {
|
||
|
|
this.collapsed = !this.collapsed;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
```
|