分享非常实用的Vue自定义指令

在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。
Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。

指令定义函数提供了几个钩子函数(可选)

  1. bind: 只调用一次,指令第一次绑定到元素时调用,可以定义一个在绑定时执行一次的初始化动作。
  2. inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
  3. update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值。
  4. componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  5. unbind: 只调用一次, 指令与元素解绑时调用。

当我们拥有多个指令时,可以引入其他指令统一管理;

 
123456789101112
import type { App } from 'vue'; import { authDirective } from '/@/utils/authDirective'; import { wavesDirective, dragDirective } from '/@/utils/customDirective'; export function directive(app: App) { // 用户权限指令 authDirective(app); // 按钮波浪指令 wavesDirective(app); // 自定义拖动指令 dragDirective(app); }

在一些需要判断权限显示按钮的业务场景下,也可以通过指令去控制DOM的显示与隐藏;

 
123456789101112131415161718192021222324252627
export function authDirective(app: App) { // 单个权限验证 app.directive('auth', { mounted(el, binding) { if (!store.state.userInfos.userInfos.authBtnList.some((v: string) => v === binding.value)) el.parentNode.removeChild(el); }, }); // 多个权限验证 app.directive('auths', { mounted(el, binding) { let flag = false; store.state.userInfos.userInfos.authBtnList.map((val: string) => { binding.value.map((v: string) => { if (val === v) flag = true; }); }); if (!flag) el.parentNode.removeChild(el); }, }); // 多个权限验证,全部满足则显示 app.directive('auth-all', { mounted(el, binding) { const flag = judementSameArr(binding.value, store.state.userInfos.userInfos.authBtnList); if (!flag) el.parentNode.removeChild(el); }, }); }

一切准备妥当后,我们把指令挂载到全局
在 main.ts 文件中引入指令

 
123
import { directive } from '/@/utils/directive'; const app = createApp(App); directive(app);

这样我们就可以使用啦!

# 代码分享
在Vue3中使用事务总线
echats 表格横向内容超出问题解决
sickboybook加加宾克斯
文章5
分类2
标签1