vue自定义指令

Posted 2023-03-09 усил

使用

<template>
   <div>
    <button v-permission="['importUser']"></button>
   </div>
</template>

自定义指令

• src/directives/permission.js

import store from '@/store'

function checkPermission (el, binding) 
  // 获取绑定的值，此处为权限 value: ['importUser']
  const  value  = binding
  // 获取所有的功能指令（后端请求回来的数据）
  const points = store.getters.userInfo.permission.points
  // 当传入的指令集为数组时
  if (value && value instanceof Array) 
    // 匹配对应的指令
    const hasPermission = points.some(point => 
      return value.includes(point)
    )
    // 如果无法匹配，则表示当前用户无该指令，那么删除对应的功能按钮
    if (!hasPermission) 
      // 移除节点
      el.parentNode && el.parentNode.removeChild(el)
    
   else 
    // eslint-disabled-next-line
    throw new Error('v-permission value is ["admin","editor"]')
  


export default 
  // 在绑定元素的父组件被挂载后调用
  mounted (el, binding) 
    checkPermission(el, binding)
  ,
  // 在包含组件的 VNode 及其子组件的 VNode 更新后调用
  update (el, binding) 
    checkPermission(el, binding)
  

• src/directives/index.js

import permission from './permission'
export default app => 
  app.directive('permission', permission)

注册

• src/main.js

import installDirective from '@/directives'
const app = createApp(App)
installDirective(app)
app.use(store).use(router).use(i18n).mount('#app')