feature[permission]: add v-permission (#653)

src/views/permission/components/SwitchRoles.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
+    {{$t('permission.switchRoles')}}：
+    <el-radio-group v-model="switchRoles">
+      <el-radio-button label="editor"></el-radio-button>
+      <el-radio-button label="admin"></el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    roles() {
+      return this.$store.getters.roles
+    },
+    switchRoles: {
+      get() {
+        return this.roles[0]
+      },
+      set(val) {
+        this.$store.dispatch('ChangeRoles', val).then(() => {
+          this.$emit('change')
+        })
+      }
+    }
+  }
+}
+</script>

src/views/permission/directive.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="app-container">
+    <switch-roles @change="handleRolesChange" />
+
+    <div :key="key" style="margin-top:30px;">
+      <span v-permission="['admin']" class="permission-alert">
+        Only <el-tag class="permission-tag" size="small">admin</el-tag> can see this
+      </span>
+      <span v-permission="['editor']" class="permission-alert">
+        Only <el-tag class="permission-tag" size="small">editor</el-tag> can see this
+      </span>
+      <span v-permission="[]" class="permission-alert">
+        Both <el-tag class="permission-tag" size="small">admin</el-tag> and <el-tag class="permission-tag" size="small">editor</el-tag> can see this
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import permission from '@/directive/permission/index.js' // 权限判断指令
+import SwitchRoles from './components/SwitchRoles'
+
+export default{
+  name: 'directivePermission',
+  components: { SwitchRoles },
+  directives: { permission },
+  data() {
+    return {
+      key: 1 // 为了能每次切换权限的时候重新初始化指令
+    }
+  },
+  methods: {
+    handleRolesChange() {
+      this.key++
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.app-container {
+  /deep/ .permission-alert {
+    width: 320px;
+    margin-top: 30px;
+    background-color: #f0f9eb;
+    color: #67c23a;
+    padding: 8px 16px;
+    border-radius: 4px;
+    display: block;
+  }
+  /deep/ .permission-tag{
+    background-color: #ecf5ff;
+  }
+}
+</style>
+

src/views/permission/index.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="app-container">
-    <div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
-    {{$t('permission.switchRoles')}}：
-    <el-radio-group v-model="switchRoles">
-      <el-radio-button label="editor"></el-radio-button>
-    </el-radio-group>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default{
-  name: 'permission',
-  data() {
-    return {
-      switchRoles: ''
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'roles'
-    ])
-  },
-  watch: {
-    switchRoles(val) {
-      this.$store.dispatch('ChangeRoles', val).then(() => {
-        this.$router.push({ path: '/permission/index?' + +new Date() })
-      })
-    }
-  }
-}
-</script>

src/views/permission/page.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="app-container">
+    <switch-roles @change="handleRolesChange" />
+  </div>
+</template>
+
+<script>
+import SwitchRoles from './components/SwitchRoles'
+
+export default{
+  name: 'pagePermission',
+  components: { SwitchRoles },
+  methods: {
+    handleRolesChange() {
+      this.$router.push({ path: '/permission/index?' + +new Date() })
+    }
+  }
+}
+</script>