fix: v-action

Author: sendya

src/core/directives/action.js

@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import store from '@/store'
+
+/**
+ * Action 权限指令
+ * 指令用法：
+ *  - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
+ *    <i-button v-action:add >添加用户</a-button>
+ *    <a-button v-action:delete>删除用户</a-button>
+ *    <a v-action:edit @click="edit(record)">修改</a>
+ *
+ *  - 当前用户没有权限时，组件上使用了该指令则会被隐藏
+ *  - 当后台权限跟 pro 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
+ *
+ *  @see https://github.com/sendya/ant-design-pro-vue/pull/53
+ */
+const action = Vue.directive('action', {
+  inserted: function (el, binding, vnode) {
+    const actionName = binding.arg
+    const roles = store.getters.roles
+    const elVal = vnode.context.$route.meta.permission
+    const permissionId = elVal instanceof String && [elVal] || elVal
+    roles.permissions.forEach(p => {
+      if (!permissionId.includes(p.permissionId)) {
+        return
+      }
+      if (p.actionList && !p.actionList.includes(actionName)) {
+        el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
+      }
+    })
+  }
+})
+
+export default action

src/core/lazy_use.js

@@ -9,6 +9,7 @@ import Viser from 'viser-vue'
 // ext library
 import VueClipboard from 'vue-clipboard2'
 import PermissionHelper from '@/utils/helper/permission'
+import './directives/action'
 
 VueClipboard.config.autoSetContainer = true
 

src/core/use.js

@@ -1,24 +1,25 @@
-import Vue from 'vue'
-import VueStorage from 'vue-ls'
-import config from '@/config/defaultSettings'
-
-// base library
-import Antd from 'ant-design-vue'
-import Viser from 'viser-vue'
-import VueCropper from 'vue-cropper'
-import 'ant-design-vue/dist/antd.less'
-
-// ext library
-import VueClipboard from 'vue-clipboard2'
-import PermissionHelper from '@/utils/helper/permission'
-// import '@/components/use'
-
-VueClipboard.config.autoSetContainer = true
-
-Vue.use(Antd)
-Vue.use(Viser)
-
-Vue.use(VueStorage, config.storageOptions)
-Vue.use(VueClipboard)
-Vue.use(PermissionHelper)
-Vue.use(VueCropper)
+import Vue from 'vue'
+import VueStorage from 'vue-ls'
+import config from '@/config/defaultSettings'
+
+// base library
+import Antd from 'ant-design-vue'
+import Viser from 'viser-vue'
+import VueCropper from 'vue-cropper'
+import 'ant-design-vue/dist/antd.less'
+
+// ext library
+import VueClipboard from 'vue-clipboard2'
+import PermissionHelper from '@/utils/helper/permission'
+// import '@/components/use'
+import './directives/action'
+
+VueClipboard.config.autoSetContainer = true
+
+Vue.use(Antd)
+Vue.use(Viser)
+
+Vue.use(VueStorage, config.storageOptions)
+Vue.use(VueClipboard)
+Vue.use(PermissionHelper)
+Vue.use(VueCropper)

src/permission.js

@@ -67,37 +67,3 @@ router.beforeEach((to, from, next) => {
 router.afterEach(() => {
   NProgress.done() // finish progress bar
 })
-
-/**
- * Action 权限指令
- * 指令用法：
- *  - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
- *    <i-button v-action:add >添加用户</a-button>
- *    <a-button v-action:delete>删除用户</a-button>
- *    <a v-action:edit @click="edit(record)">修改</a>
- *
- *  - 当前用户没有权限时，组件上使用了该指令则会被隐藏
- *  - 当后台权限跟 pro 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
- *
- *  @see https://github.com/sendya/ant-design-pro-vue/pull/53
- */
-const action = Vue.directive('action', {
-  bind: function (el, binding, vnode) {
-    const actionName = binding.arg
-    const roles = store.getters.roles
-    const elVal = vnode.context.$route.meta.permission
-    const permissionId = elVal instanceof String && [elVal] || elVal
-    roles.permissions.forEach(p => {
-      if (!permissionId.includes(p.permissionId)) {
-        return
-      }
-      if (p.actionList && !p.actionList.includes(actionName)) {
-        el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
-      }
-    })
-  }
-})
-
-export {
-  action
-}