From 25a1a2582a6930a5b0ba1a65526a3eb6a7cfaa75 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Wed, 5 Aug 2020 10:11:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20the=20problem=20that=20v-auth=20directiv?=
 =?UTF-8?q?e=20doesn't=20take=20effect=20in=20native=20html=20element;=20:?=
 =?UTF-8?q?bug:=20=E4=BF=AE=E5=A4=8D=EF=BC=9Av-auth=20=E6=8C=87=E4=BB=A4?=
 =?UTF-8?q?=E5=9C=A8=E5=8E=9F=E7=94=9F=20HTML=20=E5=85=83=E7=B4=A0?=
 =?UTF-8?q?=E4=B8=8A=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84=20bug=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/list/QueryList.vue    |  2 +-
 src/plugins/authority-plugin.js | 37 ++++++++++++++++++---------------
 src/theme/default/style.less    |  1 +
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/pages/list/QueryList.vue b/src/pages/list/QueryList.vue
index bad8046..0f9e58d 100644
--- a/src/pages/list/QueryList.vue
+++ b/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>
diff --git a/src/plugins/authority-plugin.js b/src/plugins/authority-plugin.js
index 860b1d5..7c40aad 100644
--- a/src/plugins/authority-plugin.js
+++ b/src/plugins/authority-plugin.js
@@ -42,33 +42,33 @@ 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)) {
-    el.classList.add('disabled')
-    el.setAttribute('title', '无此权限')
-    el.addEventListener('click', preventClick, true)
+    addDisabled(el)
   } else {
-    el.classList.remove('disabled')
-    el.removeAttribute('title')
-    el.removeEventListener('click', preventClick, true)
+    removeDisabled(el)
   }
 }
 
+const addDisabled = function (el) {
+  if (el.tagName === 'BUTTON') {
+    el.setAttribute('disabled', 'disabled')
+  } else {
+    el.classList.add('disabled')
+  }
+  el.setAttribute('title', '无此权限')
+}
+
+const removeDisabled = function (el) {
+  el.classList.remove('disabled')
+  el.removeAttribute('disabled')
+  el.removeAttribute('title')
+}
+
 const AuthorityPlugin = {
   install(Vue) {
     Vue.directive('auth', {
@@ -77,6 +77,9 @@ const AuthorityPlugin = {
       },
       update(el, binding,vnode) {
         checkInject(el, binding, vnode)
+      },
+      unbind(el) {
+        removeDisabled(el)
       }
     })
     Vue.mixin({
diff --git a/src/theme/default/style.less b/src/theme/default/style.less
index c722172..f91a72a 100644
--- a/src/theme/default/style.less
+++ b/src/theme/default/style.less
@@ -29,4 +29,5 @@
 .disabled{
   cursor: not-allowed;
   color: @disabled-color;
+  pointer-events: none;
 }