描述：
1、使用Menu菜单组件
2、动态数据与静态数据模拟
3、菜单层级检查
文档库
https://chenz24.github.io/vue-blu/#/components/menu#menu-item
问题记录
存在第三级后皆与第三级对齐的情况，认为配置setPadding
1、<menu-item>中配置click事件跳转路由无效
2、<menu-item>中同时配置click和to，click无效
3、路由跳转需在<menu-item>中使用to
4、与文档中click的说明相悖：[click 点击事件，设置此项 to 将失效]
案例
<template>
<!-- 存在第三级后皆与第三级对齐的情况，认为配置setPadding -->
<div style="width:100%;">
<div class="menu is-dark">
<!-- 动态分组资源 -->
<menus v-for="(item, index) in menuGroupList" :key="index" :label="item.label">
<nav-item :list="item.group" :level="0"></nav-item>
</menus>
<!-- 动态基础资源 -->
<menus label="路由菜单">
<nav-item :list="menuDataList" :level="0" @handleMenuItemClick="handleMenuItemClick"></nav-item>
</menus>
<!-- 静态资源 -->
<menus label="内容管理">
<menu-item icon="image" :name="1">
<span>图片</span>
<menus slot="sub">
<!-- :to="{ path: '/components/menu/submenu1', query: { userId: 321 }}" -->
<menu-item icon="car" :is-active="true">汽车</menu-item>
<menu-item icon="slack">
<span>风景</span>
<menus slot="sub">
<menu-item icon="home">Picture</menu-item>
<menu-item icon="home">Content</menu-item>
<menu-item icon="home">
<span>Nav</span>
<menus slot="sub">
<menu-item icon="home">Main Nav</menu-item>
<menu-item icon="home">Sub Nav</menu-item>
</menus>
</menu-item>
</menus>
</menu-item>
</menus>
</menu-item>
<menu-item :name="2" icon="music">音乐</menu-item>
<menu-item :name="3" icon="file-text-o"><span>文章</span></menu-item>
<menu-item :name="4" icon="film"><span>视频</span></menu-item>
</menus>
<menus label="多级分组" slot="sub">
<menu-item :name="11" icon="music">
<span>多级一层</span>
<menus slot="sub">
<menu-item>
<span>多级二层</span>
<menus slot="sub">
<menu-item>
<span>多级三层</span>
<menus slot="sub">
<menu-item>
<span style="padding-left: 15px;">多级四层</span>
<menus slot="sub">
<menu-item>
<span style="padding-left: 30px;">多级五层</span>
</menu-item>
</menus>
</menu-item>
</menus>
</menu-item>
</menus>
</menu-item>
</menus>
</menu-item>
</menus>
<menus>
<menu-item :name="5" icon="users">会员管理</menu-item>
<menu-item :name="6" icon="ticket">工单管理</menu-item>
<menu-item :name="7" icon="lock">修改密码</menu-item>
<menu-item icon="lock">
<span>多级四层</span>
<menus slot="sub">
<menu-item>
<span>多级五层</span>
</menu-item>
</menus>
</menu-item>
<div class="divider"></div>
<menu-item :name="8" icon="sign-out">退出登录</menu-item>
</menus>
</div>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('nav-item', {
name: 'NavItem',
props: {
list: {
type: Array,
default: () => []
},
level: {
type: Number,
default: 0
}
},
watch: {
list: {
handler(n, o) {},
deep: true
}
},
methods: {
setPadding(level) {
return {
paddingLeft: (level * 10) + 'px'
}
},
handleMenuClick(item) {
this.$emit('handleMenuItemClick', item)
}
},
template: '<div><menu-item v-for="(menu) in list" :key="menu.name" :is-active="menu.active" :to="{ path: menu.way, query: {}}">'
+'<span :style="setPadding(level)" @click="handleMenuClick(menu)">{{ menu.title }}</span>'
+'<menus slot="sub" v-if="menu.children && menu.children.length">'
+'<nav-item :list="menu.children" :level="(level+1)"></nav-item>'
+'</menus>'
+'</menu-item></div>'
})
export default {
name: 'BluNavSide',
data() {
return {
menuGroupList: [
{ label: '财务管理', group: [
{ name: '1-1', title: '本金', way: '', children: [] },
{ name: '1-2', title: '利息', way: '', children: [] },
{ name: '1-3', title: '违约金', children: [
{ name: '1-3-1', title: '日违约', children: [] },
{ name: '1-3-2', title: '月违约', children: [] },
{ name: '1-3-3', title: '年违约', children: [
{ name: '1-3-3-1', title: '上半年', children: [] },
{ name: '1-3-3-2', title: '下半年', children: [] },
] }
] },
] },
{ label: '薪酬结构', group: [
{ name: '2-1', title: '薪酬范围', children: [] },
{ name: '2-2', title: '薪率', children: [] },
{ name: '2-3', title: '薪酬的幅度', children: [] },
] }
],
menuDataList: [
{ name: '11', title: '薪酬管理', way: '', active: false, children: [
{ name: '11-2', title: '薪酬结构', way: '', active: false, children: [
{ name: '11-2-1', title: '薪酬范围', way: '', active: false, children: [] },
{ name: '11-2-2', title: '薪率', way: '', active: false, children: [] },
{ name: '11-2-3', title: '薪酬的幅度', way: '', active: false, children: [] },
] },
] },
{ name: '12', title: '人力资源管理', way: '/index/home', active: false, children: [] },
{ name: '13', title: '组织架构管理', way: '/index/user', active: false, children: [] }
]
}
},
components: {},
created() {},
mounted() {},
computed: {},
watch: {},
methods:{
handleMenuItemClick(item) {
console.log('菜单点击==', item);
this.initMenuActive(this.menuDataList);
item.active = true;
},
initMenuActive(list) {
return list.map(m => {
m.active = false;
m.children && m.children.length && this.initMenuActive(m.children);
})
}
}
}
</script>
<style lang="less" scoped>
/deep/.menu-list>li.is-active{
background-color: #ff5400;
}
</style>
