docs: add single file recursive menu demo
tangjinzhou
parent
4b24c13544
commit
9481958119
|
|
@ -126,6 +126,18 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/menu/demo/template.md correctly 1`] = `
|
||||||
|
<div style="width: 256px;"><button type="button" class="ant-btn ant-btn-primary" style="margin-bottom: 16px;"><i class="anticon anticon-menu-fold"></i></button>
|
||||||
|
<ul class="ant-menu ant-menu-inline ant-menu-root ant-menu-dark" role="menu">
|
||||||
|
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 24px;"><i class="anticon anticon-pie-chart"></i> <span>Option 1</span></li>
|
||||||
|
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline" menuinfo="[object Object]">
|
||||||
|
<div aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-mail"></i><span>Navigation 2</span></span><i class="ant-menu-submenu-arrow"></i></div>
|
||||||
|
<div></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
|
exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
|
||||||
<div><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> Change Theme
|
<div><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> Change Theme
|
||||||
<br> <br>
|
<br> <br>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<template functional>
|
||||||
|
<a-sub-menu v-on="listeners" v-bind="data.attrs">
|
||||||
|
<span slot="title"><a-icon type="mail" /><span>{{data.attrs.menuInfo.title}}</span></span>
|
||||||
|
<template v-for="item in data.attrs.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 :menuInfo="item" :key="item.key"/>
|
||||||
|
</template>
|
||||||
|
</a-sub-menu>
|
||||||
|
</template>
|
||||||
|
|
@ -5,6 +5,7 @@ import SiderCurrent from './sider-current'
|
||||||
import SwitchMode from './switch-mode'
|
import SwitchMode from './switch-mode'
|
||||||
import Theme from './theme'
|
import Theme from './theme'
|
||||||
import Vertical from './vertical'
|
import Vertical from './vertical'
|
||||||
|
import Template from './template'
|
||||||
import CN from '../index.zh-CN.md'
|
import CN from '../index.zh-CN.md'
|
||||||
import US from '../index.en-US.md'
|
import US from '../index.en-US.md'
|
||||||
const md = {
|
const md = {
|
||||||
|
|
@ -35,6 +36,7 @@ export default {
|
||||||
<SwitchMode />
|
<SwitchMode />
|
||||||
<Theme />
|
<Theme />
|
||||||
<Vertical />
|
<Vertical />
|
||||||
|
<Template />
|
||||||
<api>
|
<api>
|
||||||
<CN slot='cn' />
|
<CN slot='cn' />
|
||||||
<US/>
|
<US/>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
<cn>
|
||||||
|
#### 单文件递归菜单
|
||||||
|
使用单文件方式递归生成菜单。
|
||||||
|
因组件内部会动态更改`a-sub-menu`的属性，如果拆分成单文件，无法将属性挂载到`a-sub-menu`上，你需要自行声明属性并挂载。为了实现方便，避免了属性的声明，本示例将其声明为函数式组件，并将所有属性挂载到`a-sub-menu`上。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Single file recursive menu
|
||||||
|
Use the single file method to recursively generate menus.
|
||||||
|
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 the sake of convenience, the declaration of the `props` is avoided. This example declares it as a functional component and mounts all properties to `a-sub-menu`.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div style="width: 256px">
|
||||||
|
<a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
|
||||||
|
<a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
|
||||||
|
</a-button>
|
||||||
|
<a-menu
|
||||||
|
:defaultSelectedKeys="['1']"
|
||||||
|
:defaultOpenKeys="['sub1']"
|
||||||
|
mode="inline"
|
||||||
|
theme="dark"
|
||||||
|
:inlineCollapsed="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 :menuInfo="item" :key="item.key"/>
|
||||||
|
</template>
|
||||||
|
</a-menu>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/* SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue */
|
||||||
|
import SubMenu from './SubMenu'
|
||||||
|
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>
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue