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

iczer

2020-08-04 64589950e5c91ebead5aec5ddfe83ea3a27b7cfa

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

@@ -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 @@
      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 @@
 * @returns {boolean}
 */
const preventClick = function (event) {
  event.preventDefault()
  event.stopPropagation()
  return false
}
@@ -55,7 +56,7 @@
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;
}