@xysfe/admin-menu-vue3 1.0.1 → 2.0.0-beta.1

package/README.md

@@ -1,24 +1,128 @@
-# admin-menu-vue3
+# @xys/admin-menu
 
-## Project setup
+## vue3老版本
+1.0.0以上的版本都是 适用element-plus beta版的版本，并且icon库适用@element-plus/icons的
+因为element-plus 后续正式版中有组件的名称和icon库的变化，所以区分开来
+如若使用的是正式新版的element-plus，请安装^2.0.0的版本
+
+1.0.0以上版本分支 feature_aven_admin-menu-vue3_old_version
+2.0.0以上版本分支 feature_aven_admin-menu-vue3_new_version
+## 安装
 ```
-npm install
+npm install @xysfe/admin-menu-vue3@1.0.1 -S
+
 ```
+## 如何使用
+
+#### 简单使用
+必须传入router实例，不然会报错
+```javascript
+import router from './router'
+import { AdminContainer, AdminAuth } from '@xysfe/admin-menu'
+
+// 插件控制了路由beforeEach，并在vue原型上挂载了$auth和$isInDepartment两个方法
+Vue.use(AdminContainer, { router })
+// 权限校验方法，根据权限id返回是否有权限， 等同于在vue原型上的$auth
+Vue.use(AdminAuth)
 
-### Compiles and hot-reloads for development
 ```
-npm run serve
+
+```html
+
+<div v-if="$auth(10001)"></div>
+
 ```
 
-### Compiles and minifies for production
+组件的注册名称为admin-container
+
+```html
+
+<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>
+
+```
+
+#### 进阶使用
+```javascript
+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()
+    }
+  }
+})
 ```
-npm run build
+beforeEach方法选填。
+beforeEach钩子和router本身的钩子使用方式类似，但是添加了第四个参数auth。
+执行auth方法可以对页面权限进行对应的校验，通过后进入页面。
+也可以跳过auth，直接执行next。
+
+```html
+<template>
+  <p v-auth="999999">
+     无权限999999
+  </p>
+</template>
 ```
+v-auth 指令
+可以通过使用v-auth指令，传入权限id来隐藏或展示该dom节点
+暂时只支持传入单个权限id
 
-### Lints and fixes files
+## 开发
 ```
-npm run lint
+npm run serve
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+## 打包编译
+```
+npm run lib
+```