vue3自定义全局指令

℘团子এ

已于 2023-02-07 20:58:55 修改

阅读量1.2k

点赞数

分类专栏： vue3 文章标签： vue.js 前端 Powered by 金山文档

于 2023-02-07 20:00:26 首次发布

本文链接：https://blog.csdn.net/2202_75509848/article/details/128924219

版权

vue3 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

在main.ts中进行注册全局指令

// 自定义全局指令
app.directive("permission",{
    mounted(el,binding){//自定义钩子函数
        const store = useUserStore();//实例化状态管理
        let val = binding.value;//获取v-permission传递过来的值
        var permissionList = store.user.perms || [];//[]作用是防止空指针异常，获取用户有哪些权限
        if(-1===permissionList.indexOf(val)){//判断有没权限
            //没有权限
            el.remove?.()
        }
    }
})

//组件中局部自定义指令
<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

在需要用的地方以v-permission进行使用

 <el-button size="small" type="primary" v-permission="'sys:role:update'" @click="handleEdit(scope.$index, scope.row)">修改</el-button>

3.说明：自定义指令用起来就跟vue的系统指令一样，自定义的指令具体要达到什么效果要看自定义的内容，比如本代码判断用户是否有删除权限来显示删除按钮

4.钩子函数（不需要写到文件中，直接是使用就行了）

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}