no message
Former-commit-id: 4396ced1431e32cd9557670cdbf05ae1f0c1c523 Former-commit-id: 29b5a6853a3fbae9b1c1b748459784bad67d5479 Former-commit-id: 4c07578eac615e772a6732630204206f6759c86c
This commit is contained in:
parent
ff2d262d66
commit
5a6fddef63
|
|
@ -2,10 +2,18 @@
|
|||
|
||||
局部组件是指在某个组件内注册的组件,它一般只在一个地方用到,全局无法访问
|
||||
|
||||
## dd-menu
|
||||
## D2MenuItem
|
||||
|
||||
::: tip 出现位置
|
||||
src/components/core/MainLayout/components/SideMenu/index.vue
|
||||
:::
|
||||
|
||||
该组件会根据数据选择渲染 `<el-menu-item>` 或者 `<el-submenu>` 结构,并且在 `<el-submenu>` 中再次根据数据类型递归自身,最终生成 elementUI 的菜单组件结构,支持嵌套多级
|
||||
该组件会根据数据渲染 `<el-menu-item>`
|
||||
|
||||
## D2Submenu
|
||||
|
||||
::: tip 出现位置
|
||||
src/components/core/MainLayout/components/SideMenu/index.vue
|
||||
:::
|
||||
|
||||
该组件会根据数据渲染 `<el-submenu>` 结构,并且在 `<el-submenu>` 中再次根据数据类型递归自身,最终生成 elementUI 的菜单组件结构,支持嵌套多级
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: 'dd-menu-item',
|
||||
name: 'D2MenuItem',
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
|
|
@ -5,15 +5,15 @@
|
|||
<span slot="title">{{menu.title}}</span>
|
||||
</template>
|
||||
<template v-for="(child, childIndex) in menu.children">
|
||||
<ddMenuItem v-if="child.children === undefined" :menu="child" :key="childIndex"/>
|
||||
<dd-menu-have-children v-else :menu="child" :key="childIndex"/>
|
||||
<d2-menu-item v-if="child.children === undefined" :menu="child" :key="childIndex"/>
|
||||
<d2-submenu v-else :menu="child" :key="childIndex"/>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'dd-menu-have-children',
|
||||
name: 'D2Submenu',
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
|
|
@ -22,7 +22,7 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
ddMenuItem: () => import('./ddMenuItem.vue')
|
||||
D2MenuItem: () => import('./D2MenuItem.vue')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-menu-item v-if="menu.children === undefined" :index="menu.path">
|
||||
<i :class="`fa fa-${menu.icon}`"></i>
|
||||
<span slot="title">{{menu.title}}</span>
|
||||
</el-menu-item>
|
||||
<el-submenu v-else :index="menu.path">
|
||||
<template slot="title">
|
||||
<i :class="`fa fa-${menu.icon}`"></i>
|
||||
<span slot="title">{{menu.title}}</span>
|
||||
</template>
|
||||
<dd-menu v-for="(child, childIndex) in menu.children" :menu="child" :key="childIndex"/>
|
||||
</el-submenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'dd-menu',
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -5,8 +5,8 @@
|
|||
:unique-opened="true"
|
||||
:router="true">
|
||||
<template v-for="(menu, menuIndex) in menus">
|
||||
<ddMenuItem v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
|
||||
<dd-menu-have-children v-else :menu="menu" :key="menuIndex"/>
|
||||
<d2-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
|
||||
<d2-submenu v-else :menu="menu" :key="menuIndex"/>
|
||||
</template>
|
||||
</el-menu>
|
||||
<!-- <div v-if="sideMenu.filter(e => e.title).length === 0 && !collapse" class="dd-side-menu-empty">
|
||||
|
|
@ -25,8 +25,8 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
ddMenuItem: () => import('./components/ddMenuItem.vue'),
|
||||
ddMenuHaveChildren: () => import('./components/ddMenuHaveChildren.vue')
|
||||
D2MenuItem: () => import('./components/D2MenuItem.vue'),
|
||||
D2Submenu: () => import('./components/D2Submenu.vue')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue