Vue3 自定义指令

1. 自定义指令

小满的学习视频
vue官网自定义指令的解释
常用的自定义指令

2. 通过代码了解自定义指令

1. 自定义指令必须以v 开头的驼峰式命名的变量
2. 在模板中使用时需要用-分割自定义指令

<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直接操作dom
        el.style.display = 'none'
    }
}
</script>