526互联

vue3 directive自定义指令

发布时间 2023-04-01 23:43:01作者: 完美前端
import store from '../store'
// 新建js
export default {
    install(app) {
        // 权限控制, 没有相关的权限, 则删除模块
        app.directive('permission', {
            mounted(el, val) {
                if(el && !store.state.rule.includes(val.value)) {
                    el.parentNode && el.parentNode.removeChild(el)
                }
            }
        })
    }
}


main.js
import directives from './directives'
app.use(directives)


组件里使用
<section v-permission="'1234'">
  permission--permission
</section>