Vue3 自定义指令
1. 自定义指令
小满的学习视频
vue官网自定义指令的解释
常用的自定义指令
2. 通过代码了解自定义指令
- 自定义指令必须以
v开头的驼峰式命名的变量 - 在模板中使用时需要用
-分割自定义指令
<template><div class="btns"><!-- v-has-show分割后的指令 --><button v-has-show>创建</button></div>
</template><script setup lang="ts">
import { Directive } from "vue";
// 自定义指令vHasShow，在模板中使用-分割为：v-has-show
const vHasShow:Directive = (el,binding)=>{console.log(el,binding);
}
</script>
结果：
3. 指令的钩子传递的参数中包含什么
-
el：指令绑定到的元素。这可以用于直接操作 DOM。
-
binding：一个对象，包含以下属性。
- value：传递给指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
- oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
- arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 “foo”。
- modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
- instance：使用该指令的组件实例。
- dir：指令的定义对象。
-
示例：
const baz = ref("创建按钮") <button v-has-show:foo#bot.bar.top ='baz'>创建</button>结果
- 除了 el 外，其他参数都是只读的，不要更改它们。若你需要在不同的钩子间共享信息，推荐通过元素的 dataset attribute 实现。
4. 示例：用户权限
<template><div class="btns"><button v-has-show="'shop:create'">创建</button><button v-has-show="'shop:update'">修改</button><button v-has-show="'shop:delete'">删除</button></div>
</template><script setup lang="ts">
import { Directive } from "vue";
// 如果有一个用户
const userId = "xiaoman-zx"
// 服务器返回此用户的权限
const permissions = ['xiaoman-zx:shop:create',// 'xiaoman-zx:shop:update','xiaoman-zx:shop:delete'
]
// 通过用户权限和按钮权限进行对比，如果用户权限包含按钮权限，则显示按钮，否则隐藏按钮
const vHasShow:Directive = (el,binding)=>{if(!permissions.includes(userId +":"+ binding.value)){// 通过el直接操作domel.style.display = 'none'}
}
</script>