vue3 directive自定义指令

 

 

import store from '../store'
// 自定义Vue3指令，用于权限控制
export default {
install(app) {
// 权限控制指令
// 如果当前用户没有相关权限，则删除该模块
app.directive('permission', {
mounted(el, val) {
// 判断元素是否存在以及用户是否有相应的权限
if(el && !store.state.rule.includes(val.value)) {
// 如果没有权限，则从DOM中移除该元素
el.parentNode && el.parentNode.removeChild(el)
}
}
})
}
}

在主程序中引用自定义指令

// main.js
import directives from './directives'
// 使用自定义指令
app.use(directives)

组件中使用自定义指令

<section v-permission="'1234'">
  permission--permission
</section>