ATUI之
描述
mode="horizontal" || mode="vertical" 横向与垂直
at-menu-item-group 分组
at-menu-item 子项
inline-collapsed 手风琴模式
:theme="theme" 主题 light 和 dark
width: '240px' 默认
不足
多级菜单中使用inline-collapsed，在点击子级时会折叠父级
一、递归数据动态展示
<at-menu :theme="theme" :active-name="menuActive" inline-collapsed @on-select="handleMenuSlect">
<at-menu-item name="1"><i class="icon icon-home"></i>动态递归示例</at-menu-item>
<menu-nav :list="menuList"></menu-nav>
</at-menu>
menu-nav
// 递归
Vue.component('menu-nav', {
props: {
list: {
type: Array,
default: () => []
}
},
template: '<div><template v-for="menu in list">'
+'<at-submenu v-if="menu.children && menu.children.length" :key="menu.name" :opened="menu.opened">'
+'<template slot="title"><i :class="menu.iconClass"></i>{{ menu.title }}</template>'
+'<menu-nav :list="menu.children"></menu-nav>'
+'</at-submenu>'
+'<at-menu-item v-else :key="menu.name" :name="menu.name" :to="menu.path">{{ menu.title }}</at-menu-item>'
+'</template></div>'
})
二、分组递归数据动态展示
<at-menu :active-name="menuActive" inline-collapsed @on-select="handleMenuSlect">
<menu-nav-group :list="menuGroupList"></menu-nav-group>
</at-menu>
menu-nav-group
// 分组递归
Vue.component('menu-nav-group', {
props: {
list: {
type: Array,
default: () => []
}
},
template: '<div><template v-for="menu in list">'
+'<at-submenu v-if="menu.children && menu.children.length" :key="menu.name" :opened="menu.opened">'
+'<template slot="title"><i :class="menu.iconClass"></i>{{ menu.title }}</template>'
+'<menu-nav-group :list="menu.children"></menu-nav-group>'
+'</at-submenu>'
+'<at-submenu v-if="menu.group && menu.group.length" :key="menu.name" :opened="menu.opened">'
+'<template slot="title"><i :class="menu.iconClass"></i>{{ menu.title }}</template>'
+'<at-menu-item-group v-for="(m, n) in menu.group" :key="n" :title="m.title">'
+ '<menu-nav-group :list="m.children"></menu-nav-group>'
+'</at-menu-item-group>'
+'</at-submenu>'
+'<at-menu-item v-else :key="menu.name" :name="menu.name" :to="menu.path"><i :class="menu.iconClass"></i>{{ menu.title }}</at-menu-item>'
+'</template></div>'
})
三、平铺数据动态两级菜单展示
<at-menu :active-name="menuActive" inline-collapsed @on-select="handleMenuSlect">
<menu-spread-item :list="menuSpreadList.filter(m => !m.parentFlag)" :origin="menuSpreadList" :level="0"></menu-spread-item>
</at-menu>
menu-spread-item
// 平铺两级
Vue.component('menu-spread-item', {
props: {
list: {
type: Array,
default: () => []
},
origin: {
type: Array,
default: () => []
},
level: {
type: Number,
default: 0
}
},
computed: {},
created() {
console.log('KKKKKKKKK=', this.level, this.list, this.origin);
},
template: '<div><template v-for="(item, index) in list">'
+'<at-menu-item v-if="item.isLeaf" :key="index" :name="item.name"><i class="icon icon-settings"></i>{{ item.title }}</at-menu-item>'
+'<at-submenu :key="index" v-if="!item.isLeaf">'
+'<template slot="title"><i class="icon icon-life-buoy"></i>{{ item.title }}</template>'
+'<menu-spread-item :list="origin.filter(m => item.name === m.parentFlag)" :origin="origin" :level="(level+1)"></menu-spread-item>'
+'</at-submenu>'
+'</template></div>'
})
四、平铺数据动态多级菜单展示
<at-menu :theme="theme" :active-name="menuActive" @on-select="handleMenuSlect">
<at-menu-item name="1"><i class="icon icon-home"></i>平铺多级示例</at-menu-item>
<template v-for="(item) in menuSpreadList">
<at-submenu :key="item.name" v-if="!item.parentFlag && mlist(menuSpreadList, item).length">
<template slot="title">{{ item.title }}</template>
<menu-spread-more :list="menuSpreadList" :item="item"></menu-spread-more>
</at-submenu>
<at-menu-item v-if="!item.parentFlag && !(mlist(menuSpreadList, item))" :key="item.name" :name="item.name">{{ item.title }}</at-menu-item>
</template>
</at-menu>
menu-spread-more
// 平铺多级
Vue.component('menu-spread-more', {
props: {
list: {
type: Array,
default: () => []
},
item: {
type: Object,
default: () => {}
}
},
computed: {
mlist() {
return (list, item) => {
let array = [];
return list.filter(k => k.parentFlag === item.name);
}
}
},
template: '<div><template v-for="elem in mlist(list, item)">'
+'<at-submenu v-if="mlist(list, elem).length" :key="elem.name">'
+'<template slot="title">{{ elem.title }}</template>'
+'<menu-spread-more :list="mlist(list, elem)" :item="elem"></menu-spread-more>'
+'</at-submenu>'
+'<at-menu-item v-else :key="elem.name" :name="elem.name">{{ elem.title }}</at-menu-item>'
+'</template></div>'
})
五、静态Menu
<at-menu :theme="theme" :active-name="menuActive" @on-select="handleMenuSlect">
<at-menu-item name="1"><i class="icon icon-home"></i>导航菜单一</at-menu-item>
<at-menu-item name="2" disabled><i class="icon icon-layers"></i>导航菜单二</at-menu-item>
<at-submenu>
<template slot="title"><i class="icon icon-life-buoy"></i>导航菜单三 - 子菜单</template>
<at-menu-item-group title="分组一">
<at-menu-item name="3-1">子菜单一</at-menu-item>
<at-menu-item name="3-2">子菜单二</at-menu-item>
</at-menu-item-group>
<at-menu-item-group title="分组二">
<at-menu-item name="3-3">子菜单三</at-menu-item>
<at-menu-item name="3-4" disabled>子菜单四</at-menu-item>
</at-menu-item-group>
</at-submenu>
<at-menu-item name="4"><i class="icon icon-settings"></i>导航菜单四</at-menu-item>
<at-submenu disabled>
<template slot="title"><i class="icon icon-life-buoy"></i>导航菜单三 - 子菜单</template>
<at-menu-item name="5-1">子菜单一</at-menu-item>
<at-menu-item name="5-2">子菜单二</at-menu-item>
</at-submenu>
<at-submenu>
<template slot="title"><i class="icon icon-life-buoy"></i>导航菜单 - 子菜单</template>
<at-menu-item name="5-1">子菜单一</at-menu-item>
<at-submenu>
<template slot="title"><i class="icon icon-life-buoy"></i>导航菜单三 - 子菜单</template>
<at-menu-item name="5-1">子菜单一</at-menu-item>
<at-menu-item name="5-2">子菜单二</at-menu-item>
</at-submenu>
<at-menu-item name="5-2">子菜单二</at-menu-item>
</at-submenu>
</at-menu>
export default {
name: 'AtNavSide',
data() {
return {
menuActive: '',
theme: 'dark',
menuList: [
{ name: '6', title: '导航菜单6', iconClass: 'icon icon-settings', menuDisabled: '', opened: false, path: null, children: [
{ name: '6-1', title: '子菜单6-1', iconClass: 'icon icon-settings', menuDisabled: '', opened: false, path: '', children: [] },
{ name: '6-2', title: '子菜单6-2', iconClass: 'icon icon-settings', menuDisabled: '', opened: false, path: '', children: [] },
{ name: '6-3', title: '子菜单6-3', iconClass: 'icon icon-settings', menuDisabled: '', opened: false, path: '', children: [] }
] },
{ name: '7', title: '导航菜单7', iconClass: '', menuDisabled: '', opened: true, children: [
{ name: '7-1', title: '子菜单7-1', iconClass: '', menuDisabled: '', opened: false, path: null, children: [
{ name: '7-1-1', title: '子菜单7-1-1', iconClass: '', menuDisabled: '', opened: false, path: '/hw', children: [] }
] },
] },
{ name: '8', title: '导航菜单8', iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi', children: [] }
],
menuGroupList: [
{ name: '9', title: '导航菜单9', iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: null, group: [
{ title: '分组9-1', children: [
{ name: '9-1-1', title: '子菜单9-1-1', iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi', children: [] }
] },
{ title: '分组9-2', children: [] }
] },
{ name: '10', title: '导航菜单10', iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: null, group: [
{ title: '分组10-1', children: [
{ name: '10-1-1', title: '子菜单10-1-1', iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi', children: [] },
] },
{ title: '分组10-2', children: [
{ name: '10-2-1', title: '子菜单10-2-1', iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi', children: [] },
{ name: '10-2-2', title: '子菜单10-2-2', iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi', children: [] },
] }
] }
],
menuSpreadList: [
{ name: '11', title: '导航菜单11', parentFlag: null, isLeaf: false, iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi'},
{ name: '11-1', title: '子菜单11-1', parentFlag: '11', isLeaf: true, iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi'},
{ name: '11-2', title: '子菜单11-2', parentFlag: '11', isLeaf: true, iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi'},
{ name: '12', title: '导航菜单12', parentFlag: null, isLeaf: true, iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi'},
{ name: '13', title: '导航菜单13', parentFlag: null, isLeaf: false, iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi'},
{ name: '13-1', title: '子菜单13-1', parentFlag: '13', isLeaf: true, iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi'},
{ name: '13-2', title: '子菜单13-2', parentFlag: '13', isLeaf: false, iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi'},
{ name: '13-2-1', title: '子菜单13-2-1', parentFlag: '13-2', isLeaf: true, iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi'},
{ name: '13-2-2', title: '子菜单13-2-2', parentFlag: '13-2', isLeaf: true, iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi'},
{ name: '13-2-3', title: '子菜单13-2-3', parentFlag: '13-2', isLeaf: true, iconClass: 'icon icon-home', menuDisabled: '', opened: false, path: '/emi'},
]
}
},
components: {
},
computed: {
mlist() {
return (list, item) => {
let array = [];
return array = list.filter(k => k.parentFlag === item.name);
}
}
},
created(){
},
mounted() {},
methods:{
handleMenuSlect(menu) {
console.log('切换菜单==', menu, this.menuActive);
}
}
}
</script>
<style lang="less" scoped>
.nav-menu-index{
width: 100%;
}
</style>
