vue自定义指令

学习目标：

vue自定义指令在项目中的应用

案例全文

javascript 复制代码

import { App } from 'vue'
import router from '@/router'
import { permissionsEnum } from '@/enums/permissions'

// 该指令可以用来拦截元素的点击事件并阻止冒泡，如果绑定的是button元素，则给button添加disabled属性，其他元素会添加一个禁用样式类.custom-disabled
// 如果给指令传值，则根据值真假决定是否开启禁用
// 如果没给指令传值，则根据当前路由权限，决定是否开启禁用
// 如果元素或组件自身有disabled属性，可直接用其自带的disabled属性来决定是否开启禁用
// 如果元素或组件自身没有disabled属性，可用使用该指令
const disabledDir = (el: HTMLElement, binding: any) => {
  const permissions = router.currentRoute.value.meta?.permissions
  console.log('el:', el)
  console.log('binding:', binding)
  let disabled = false

  // 判定为没传指令值
  if (binding.value === undefined) {
    // 没传指令值
    disabled = permissions === permissionsEnum.view
  } else {
    // 传指令值了
    disabled = binding.value
  }

  if (disabled) {
    // 阻止点击事件
    el.addEventListener(
      'click',
      (event: MouseEvent) => {
        event.stopPropagation()
        event.preventDefault()
      },
      true
    )
    if (el instanceof HTMLButtonElement) {
      el.disabled = true
    } else {
      el.classList.add('custom-disabled')
    }
  }
}

export function installPermissions(app: App): App {
  app.directive('disabled', disabledDir)
  return app
}

1：声明一个函数用来处理权限信息

disabledDir 该函数接收**el: HTMLElement, binding: any，**dom元素和自定义传参

当没有自定义传参时，获取router中的权限信息；
当有自定义传参时，根据传参值，判断可不可以点击
添加addEventListener监听事件，按钮添加disabled属性，不是按钮添加自定义样式

2：自定义指令

在vue中添加自定义指令

javascript 复制代码

function installPermissions(app: App): App {
  app.directive('disabled', disabledDir)
  return app
}

然后把该函数挂载到vue实例，就可以在项目中使用了。

3：使用

javascript 复制代码

<a-button v-disabled="userStore.user.roleType === 0" type="primary" style="margin-left: 20px" @click="edit" > 编辑 </a-button>