fix: the problem that v-auth directive doesn't take effect in native html element; 🐛

修复：v-auth 指令在原生 HTML 元素上不生效的 bug；

src/pages/list/QueryList.vue

@@ -103,8 +103,19 @@
         <div slot="description" slot-scope="{text}">
           {{text}}
         </div>
-        <div slot="action" slot-scope="{text, record, index}">
-          <a-icon type="edit" />{{index}}
+        <div slot="action" slot-scope="{text, record}">
+          <a style="margin-right: 8px">
+            <a-icon type="plus"/>新增
+          </a>
+          <a style="margin-right: 8px">
+            <a-icon type="edit"/>编辑
+          </a>
+          <a @click="deleteRecord(record.key)">
+            <a-icon type="delete" />删除1
+          </a>
+          <a @click.native="deleteRecord(record.key)" v-auth="`delete`">
+            <a-icon type="delete" />删除2
+          </a>
         </div>
         <template slot="statusTitle">
           <a-icon @click.native="onStatusTitleClick" type="info-circle" />
@@ -173,7 +184,14 @@ export default {
       selectedRows: []
     }
   },
+  authorize: {
+    deleteRecord: 'delete'
+  },
   methods: {
+    deleteRecord(key) {
+      this.dataSource = this.dataSource.filter(item => item.key !== key)
+      this.selectedRows = this.selectedRows.filter(item => item.key !== key)
+    },
     toggleAdvanced () {
       this.advanced = !this.advanced
     },

src/plugins/authority-plugin.js

@@ -48,6 +48,7 @@ const auth = function(authConfig, permission, role, permissions, roles) {
  * @returns {boolean}
  */
 const preventClick = function (event) {
+  event.preventDefault()
   event.stopPropagation()
   return false
 }
@@ -55,7 +56,7 @@ const preventClick = function (event) {
 const checkInject = function (el, binding,vnode) {
   const type = binding.arg
   const check = binding.value
-  const instance = vnode.componentInstance
+  const instance = vnode.context
   const $auth = instance.$auth
   if (!$auth || !$auth(check, type)) {
     el.classList.add('disabled')

src/theme/default/style.less

@@ -28,5 +28,5 @@
 }
 .disabled{
   cursor: not-allowed;
-  opacity: 0.4;
+  color: @disabled-color;
 }