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

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

src/pages/list/QueryList.vue

@@ -113,7 +113,7 @@
           <a @click="deleteRecord(record.key)">
             <a-icon type="delete" />删除1
           </a>
-          <a @click.native="deleteRecord(record.key)" v-auth="`delete`">
+          <a @click="deleteRecord(record.key)" v-auth="`delete`">
             <a-icon type="delete" />删除2
           </a>
         </div>

src/plugins/authority-plugin.js

@@ -42,31 +42,31 @@ const auth = function(authConfig, permission, role, permissions, roles) {
   return false
 }
 
-/**
- * 阻止的 click 事件监听
- * @param event
- * @returns {boolean}
- */
-const preventClick = function (event) {
-  event.preventDefault()
-  event.stopPropagation()
-  return false
-}
-
 const checkInject = function (el, binding,vnode) {
   const type = binding.arg
   const check = binding.value
   const instance = vnode.context
   const $auth = instance.$auth
   if (!$auth || !$auth(check, type)) {
+    addDisabled(el)
+  } else {
+    removeDisabled(el)
+  }
+}
+
+const addDisabled = function (el) {
+  if (el.tagName === 'BUTTON') {
+    el.setAttribute('disabled', 'disabled')
+  } else {
     el.classList.add('disabled')
+  }
   el.setAttribute('title', '无此权限')
-    el.addEventListener('click', preventClick, true)
-  } else {
+}
+
+const removeDisabled = function (el) {
   el.classList.remove('disabled')
+  el.removeAttribute('disabled')
   el.removeAttribute('title')
-    el.removeEventListener('click', preventClick, true)
-  }
 }
 
 const AuthorityPlugin = {
@@ -77,6 +77,9 @@ const AuthorityPlugin = {
       },
       update(el, binding,vnode) {
         checkInject(el, binding, vnode)
+      },
+      unbind(el) {
+        removeDisabled(el)
       }
     })
     Vue.mixin({

src/theme/default/style.less

@@ -29,4 +29,5 @@
 .disabled{
   cursor: not-allowed;
   color: @disabled-color;
+  pointer-events: none;
 }