vueblu之Menu菜单案例记录

描述：

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="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>