SystemMenu系统菜单

注意

侧边栏菜单，用于运营平台系统配置菜单，可配置权限管理。

注册该组件时会自动绑定$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>
    <ws-system-menu :menuData="menuData" :menuConfig="menuConfig"></ws-system-menu>
</template>

<script>
    export default {
        data () {
            return {
                menuData: [],
                menuConfig: {
                    backgroundColor: '#313F5A',
                }
            }
        },
        created () {
            getMenuList().then(res => {
                if (res.code == 1) {
                    this.menuData = JSON.parse(res.data);
                }
            })
        }
    }
</script>

属性

参数	说明	类型	默认值
menuWidth	菜单宽度	String	256px
lineHeight	菜单子项高度,行高	String	48px
fontSize	菜单字体大小	String	14px
inconFontSize	菜单字体图标大小	String	14px
backgroundColor	菜单背景颜色	String	#393f52
textColor	菜单字体颜色	String	#fff
activeTextColor	激活选中菜单字体颜色	String	#fff
activeBackgroundColor	激活选中菜单背景颜色	String	#2B2F42
hoverBackgroundColor	hover菜单背景颜色	String	#2B2F42
hoverTextColor	hover菜单字体颜色	String	#fff
disableTextColor	禁用收缩和展开菜单字体颜色,固定降低透明度0.5	String	#fff
uniqueOpened	是否只保持一个子菜单的展开	Boolean	true
routerModel	是否开启路由模式，路由模式下router作为路由连接，并默认选中打开当前路由对应菜单	Boolean	true
defaultActiveId	默认激活选中的菜单的id，id优先级高于moduleName	String	-
defaultActiveModuleName	默认激活选中的菜单的模块名moduleName	String	-
indentLevelA	一级菜单缩进值	String	-
indentLevelB	二级菜单缩进值	String	-
indentLevelC	三级菜单缩进值	String	-
toggleLevelA	一级菜单是否可收缩	Boolean	false
toggleLevelB	二级菜单是否可收缩	Boolean	true
toggleLevelC	三级菜单是否可收缩	Boolean	true

方法

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

插槽

name	说明
logo	项目logo

SystemMenu系统菜单 ​

基础用法 ​

属性 ​

方法 ​

插槽 ​

SystemMenu系统菜单

基础用法

属性

方法

插槽