@xysfe/admin-menu

## 安装 ``` npm install @xysfe/admin-menu -S ``` ## 如何使用

Usage no npm install needed!

<script type="module">
  import xysfeAdminMenu from 'https://cdn.skypack.dev/@xysfe/admin-menu';
</script>

README

@xys/admin-menu

安装

npm install @xysfe/admin-menu -S

如何使用

简单使用

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

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

Vue.use(AdminContainer, { router })

组件的注册名称为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: {
        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
            } else if (ENVMARK === 1000 || ENVMARK === 900) {
                return 3
            }
            return 1
        }
    }
}
</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 AdminMenu from '@xys/admin-menu'

Vue.use(AdminMenu, {
  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