fix: the problem that v-auth directive doesn't take effect in native html e...

iczer

2020-08-05 25a1a2582a6930a5b0ba1a65526a3eb6a7cfaa75

fix: the problem that v-auth directive doesn't take effect in native html element; :bug:
修复：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 @@
  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 = {
@@ -77,6 +77,9 @@
      },
      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;
}