vue-blu之Menu菜单案例记录（修正版）

修正项

1、子组件请求事件更改为调用全局事件。
2、更改菜单选中项标记方式：组件的is-active属性效果更改为自定义的样式显示。

正文

<template>
    <div style="width:100%;">
        <div class="menu is-dark">
            <!-- 动态基础资源 -->
            <menus label="路由菜单">
                <nav-item :list="menuDataList" :level="0" @handleMenuItemClick="handleMenuItemClick"></nav-item>
            </menus>

            <!-- 动态分组资源 -->
            <menus v-for="(item, index) in menuGroupList" :key="index" :label="item.label">
                <nav-item :list="item.group" :level="0"></nav-item>
            </menus>

            <!-- 静态资源 -->
            <menus label="内容管理">
                <menu-item icon="image" :name="1">
                    <span>图片</span>
                    <menus slot="sub">
                        <menu-item icon="car">汽车</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>
         
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import bus from '@/utils/bus'
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) {
           item.children && item.children.length && (item.isActive = false)
            bus.$emit('handleMenuItemClick', item);
        },
    },
    template: '<div><menu-item v-for="(menu) in list" :key="menu.name" :class="{ activeBg: menu.isActive && !menu.children.length}" :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 {
            currentMenuId: '',
            menuGroupList: [
                { label: '财务管理', group: [
                    { name: '1-1', title: '本金', way: '/user', children: [] },
                    { name: '1-2', title: '利息', way: '/home', 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: '', isActive: false, children: [
                    { name: '11-2', title: '薪酬结构', way: '', isActive: false, children: [
                        { name: '11-2-1', title: '薪酬范围', way: '', isActive: false, children: [] },
                        { name: '11-2-2', title: '薪率', way: '', isActive: false, children: [] },
                        { name: '11-2-3', title: '薪酬的幅度', way: '', isActive: false, children: [] },
                    ] },
                ] },
                { name: '12', title: '人力资源管理', way: '/index/home', isActive: false, children: [] },
                { name: '13', title: '客户管理', way: '/index/user', isActive: false, children: [] },
                { name: '14', title: '信息录入', way: '/index/detail', active: false, children: [] },
            ]
        }
    },
    components: {},
    created() {},
    mounted() {
        bus.$on('handleMenuItemClick', (menu) => {
            this.handleMenuItemClick(menu);
        });
    },
    computed: {},
    watch: {},
    methods:{
        handleMenuItemClick(item) {
            console.log('菜单点击==', item);
            this.currentMenuId = item.name;
            this.menuSelected(this.menuDataList, item.name);
            !(item.children && item.children.length) && (item.isActive = true)
        },
        menuSelected(array, id) {
            array.forEach(element => {
                element.name === id ? element.isActive = true : element.isActive = false;

                if (element.children && element.children.length) {
                    this.menuSelected(element.children, id);
                }
            });
        },
    }
}
</script>

<style>
.activeBg{
    background-color: #ff5400;
}
</style>
```