@xysfe/admin-menu

@xys/admin-menu

安装

npm install @xysfe/admin-menu -S

如何使用

简单使用

必须传入router实例，不然会报错

import router from './router'
import { AdminContainer, auth } from '@xysfe/admin-menu'

// 插件控制了路由beforeEach，并在vue原型上挂载了$auth和$isInDepartment两个方法
Vue.use(AdminContainer, { router })
// 权限校验方法，根据权限id返回是否有权限， 等同于在vue原型上的$auth
const hasPermit = auth(10000) 

组件的注册名称为admin-container

<template>
    <admin-container
            :env="env">
        <div class="router-view-container">
            <router-view />
        </div>
    </admin-container>
</template>

<script>
import { hostConf } from '@xysfe/util'

export default {
    name: 'Layout',
    computed: {
        // 控制logo展示
        env () {
            // 100: 小雨伞dev
            // 600: 小雨伞beta
            // 500: 小雨伞alpha
            // 200: 小雨伞idc
            // 700: 创信beta
            // 800：创信idc
            // 1000: 木成林beta
            // 900: 木成林idc
            const ENVMARK = parseInt(hostConf.ENVMARK)
            if (ENVMARK === 700 || ENVMARK === 800) {
                return 2 // 创信logo
            } else if (ENVMARK === 1000 || ENVMARK === 900) {
                return 3 // 木成林logo
            }
            return 1 // 小雨伞logo
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .router-view-container {
        background: #F1F3FA;
        padding: 30px;
        min-height: 100%;
        box-sizing: border-box;
    }
</style>

进阶使用

import router from './router'
import { AdminContainer } from '@xysfe/admin-menu'

Vue.use(AdminContainer, {
  router,
  beforeEach (to, from, next, auth) {
    if (to.path === '/cpsAuth/accountLogout') {
      next()
    } else {
      auth()
    }
  }
})

beforeEach方法选填。 beforeEach钩子和router本身的钩子使用方式类似，但是添加了第四个参数auth。 执行auth方法可以对页面权限进行对应的校验，通过后进入页面。 也可以跳过auth，直接执行next。

<template>
  <p v-auth="999999">
     无权限999999
  </p>
</template>

v-auth 指令 可以通过使用v-auth指令，传入权限id来隐藏或展示该dom节点 暂时只支持传入单个权限id

开发

npm run serve

打包编译

npm run lib