docs: update demo
parent
c47582a93e
commit
89c3a56362
|
@ -1,7 +1,6 @@
|
||||||
<template functional>
|
<template functional>
|
||||||
<a-sub-menu
|
<a-sub-menu
|
||||||
:key="data.key"
|
:key="props.menuInfo.key"
|
||||||
v-on="listeners"
|
|
||||||
>
|
>
|
||||||
<span slot="title">
|
<span slot="title">
|
||||||
<a-icon type="mail" /><span>{{ props.menuInfo.title }}</span>
|
<a-icon type="mail" /><span>{{ props.menuInfo.title }}</span>
|
||||||
|
|
|
@ -0,0 +1,41 @@
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Menu } from 'ant-design-vue';
|
||||||
|
export default {
|
||||||
|
name: 'SubMenu',
|
||||||
|
// must add isSubMenu: true
|
||||||
|
isSubMenu: true,
|
||||||
|
props: {
|
||||||
|
...Menu.SubMenu.props,
|
||||||
|
// Cannot overlap with properties within Menu.SubMenu.props
|
||||||
|
menuInfo: {
|
||||||
|
type: Object,
|
||||||
|
default: ()=>({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -1,13 +1,13 @@
|
||||||
<cn>
|
<cn>
|
||||||
#### 单文件递归菜单
|
#### 单文件递归菜单
|
||||||
使用单文件方式递归生成菜单。
|
使用单文件方式递归生成菜单。
|
||||||
因组件内部会动态更改`a-sub-menu`的属性,如果拆分成单文件,无法将属性挂载到`a-sub-menu`上,你需要自行声明属性并挂载。为了实现方便,避免了属性的声明,本示例将其声明为函数式组件,并将所有属性挂载到`a-sub-menu`上。
|
因组件内部会动态更改`a-sub-menu`的属性,如果拆分成单文件,无法将属性挂载到`a-sub-menu`上,你需要自行声明属性并挂载。为了方便,避免属性的声明,我们推荐使用函数式组件。
|
||||||
</cn>
|
</cn>
|
||||||
|
|
||||||
<us>
|
<us>
|
||||||
#### Single file recursive menu
|
#### Single file recursive menu
|
||||||
Use the single file method to recursively generate menus.
|
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`.
|
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>
|
</us>
|
||||||
|
|
||||||
```html
|
```html
|
||||||
|
@ -35,7 +35,10 @@ The properties of `a-sub-menu` are dynamically changed inside the component. If
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/* SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue */
|
/*
|
||||||
|
* recommend SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue
|
||||||
|
* SubMenu1.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu1.vue
|
||||||
|
* */
|
||||||
import SubMenu from './SubMenu'
|
import SubMenu from './SubMenu'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|
|
@ -48,7 +48,6 @@ const SubMenu = {
|
||||||
triggerSubMenuAction: PropTypes.string,
|
triggerSubMenuAction: PropTypes.string,
|
||||||
popupClassName: PropTypes.string,
|
popupClassName: PropTypes.string,
|
||||||
getPopupContainer: PropTypes.func,
|
getPopupContainer: PropTypes.func,
|
||||||
test: PropTypes.any,
|
|
||||||
forceSubMenuRender: PropTypes.bool,
|
forceSubMenuRender: PropTypes.bool,
|
||||||
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||||
disabled: PropTypes.bool,
|
disabled: PropTypes.bool,
|
||||||
|
|
Loading…
Reference in New Issue