vue-blu之MenuItem封装记录

描述

1、Menu菜单封装
2、多层菜单的事件建议用busEvent

问题记录

1、中配置click事件跳转路由无效
2、中同时配置click和to，click无效
3、路由跳转需在中使用to
4、与文档中click的说明相悖：[click 点击事件，设置此项 to 将失效]
5、文档： https://chenz24.github.io/vue-blu/#/components/menu#menu-item

组件调用

<dmenu :list="menuDataList" :level="0" @handleMenuItemClick="handleMenuItemClick"></dmenu> 

案例

<template>
    <div>
        <menu-item v-for="(menu) in list" :key="menu.name" :to="menu.way" :is-active="menu.active">
            <span :style="setPadding(level)" @click="handleMenuClick(menu)">{{ menu.title }}</span>
            <menus slot="sub" v-if="menu.children && menu.children.length">
                <blu-menu-item :list="menu.children" :level="(level+1)"></blu-menu-item>
            </menus>
        </menu-item>
    </div>
</template>

<script>
export default {
    name: 'BluMenuItem',
    props: {
        list: {
            type: Array,
            default: () => []
        },
        level: {
            type: Number,
            default: 0
        }
    },
    watch: {
        list: {
            handler(n, o){},
            deep: true,
            immediate: true
        }
    },
    methods: {
        setPadding(level) {
            return {
                paddingLeft: (level * 10) + 'px'
            }
        },
        handleMenuClick(item) {
            console.log('nnnn=======', item, item.way);
            this.$emit('handleMenuItemClick', item)
        }
    },
}
</script>

<style lang="less" scoped>
/deep/.menu-list>li.is-active{
    background-color: #ff5400;
}
</style>
<style>
li.is-active{
    background-color: #ff5400;
}
</style>