vue-plugin

Appearance

目录

NavigationMenu抽屉式导航菜单 ​

注意

抽屉式导航菜单，用于运营平台系统配置菜单，可配置权限管理。

注册该组件时会自动绑定$getModuleUrl方法到vue 原型上面。 Vue.prototype.$getModuleUrl = (moduleName,op) => {}。 并且会全局混入Vue.mixin全局混入powerList权限属性，powerList具有权限根据moduleName 智能匹配该模块下所配置的所有op值来做权限控制，所以使用方法可在所有组件内直接使用v-if="powerList[op]"控制权限，注意只有配置了 moduleName的组件才能控制权限。 this.$getModuleUrl(moduleName,op)根据moduleName和op值获取对应模块的 请求地址 及 权限

可在页面组件里用this.$getModuleUrl(moduleName,op)根据moduleName和op值获取对应模块的 请求地址 及 权限

基础用法 ​

vue
<template>
    <el-button @click="menuBtnClick">打开菜单</el-button>
    <ws-navigation-menu :visible.sync="visible" :menuData="menuList"></ws-navigation-menu>
</template>

<script>
    export default {
        data () {
            return {
                menuList: [
                    {id:1,resourcesName:'菜单1'},
                    {id:2,resourcesName:'菜单2'},
                ],
                visible: false,

            }
        },
        methods: {
            menuBtnClick() {
                this.visible = !this.visible;
            },
        }
    }
</script>

:::

属性 ​

参数说明类型默认值
menuData菜单列表，必传参数Array-
menuConfig暂未开放，预留参数，可不用Object-
visible菜单是否可见，可用sync修饰符Booleanfalse
routerData路由列表，type==2的菜单列表。可结合导航页签使用，可用sync修饰符Array-
closeOnPressEscape是否可以通过按下 ESC 关闭 菜单Booleantrue

方法 ​

方法名说明
$getModuleUrl绑定到Vue.prototype上，根据模块名和op值查询对应模块的请求地址及权限，参数{moduleName,op}
$getModuleOpList绑定到Vue.prototype上，根据模块名查询当前模块所有配置的op，参数{moduleName}