Vue 创建自定义指令
Vue 除了使用内置的指令外，还可以创建自定义指令。
自定义指令的作用是扩展 Vue 的功能，可以自定义指令的行为，比如：
- 自定义指令可以绑定到元素上，可以监听元素的事件，执行自定义的逻辑。
- 自定义指令可以接收参数，可以动态修改指令的行为。
- 自定义指令可以添加多个，可以组合使用。
自定义指令的语法
自定义指令的语法如下：
<div v-指令名称:参数="表达式"></div>
指令名称：自定义指令的名称，可以自定义，但需要以v-开头。参数：可选参数，可以接收指令的附加参数。表达式：指令的表达式，可以动态修改指令的行为。
自定义指令的创建
自定义指令的创建需要使用 Vue.directive 方法，该方法接收两个参数：
指令名称：自定义指令的名称。指令对象：一个对象，包含三个函数：
自定义指令的使用方法如下：
// 注册自定义指令
Vue.directive("指令名称", {bind: function (el, binding, vnode) {// 指令绑定时执行的函数},update: function (el, binding, vnode, oldVnode) {// 指令更新时执行的函数},unbind: function (el, binding, vnode) {// 指令解绑时执行的函数},
});
bind：指令绑定时执行的函数，参数如下：el：指令绑定的元素。binding：一个对象，包含以下属性：name：指令名称。value：指令表达式的值。oldValue：指令表达式的旧值。expression：指令表达式。arg：指令参数。modifiers：一个对象，包含修饰符。
vnode：指令所在的虚拟节点。
update：指令更新时执行的函数，参数如下：el：指令绑定的元素。binding：一个对象，包含以下属性：name：指令名称。value：指令表达式的值。oldValue：指令表达式的旧值。expression：指令表达式。arg：指令参数。modifiers：一个对象，包含修饰符。
vnode：指令所在的虚拟节点。oldVnode：指令所在的旧虚拟节点。
unbind：指令解绑时执行的函数，参数如下：el：指令绑定的元素。binding：一个对象，包含以下属性：name：指令名称。value：指令表达式的值。oldValue：指令表达式的旧值。expression：指令表达式。arg：指令参数。modifiers：一个对象，包含修饰符。
vnode：指令所在的虚拟节点。
自定义指令的示例 - 控制页面按钮的显示隐藏 v-hasPermi
- 注册自定义指令：
Vue.directive("hasPermi", {bind: function (el, binding, vnode) {// 获取权限列表var permissons = vnode.context.$route.meta.permissons;// 获取按钮的名称var btnName = binding.arg;// 获取按钮的显示隐藏状态var show = false;// 遍历权限列表，判断按钮是否显示for (var i = 0; i < permissons.length; i++) {if (permissons[i] === btnName) {show = true;break;}}// 根据显示隐藏状态，显示或隐藏按钮if (show) {el.style.display = "block";} else {el.style.display = "none";}},
});
- 在页面中使用自定义指令：
<button v-hasPermi="'btn1'">按钮1</button>
<button v-hasPermi="'btn2'">按钮2</button>
<button v-hasPermi="'btn3'">按钮3</button>
其中，btn1、btn2、btn3 是权限列表，页面中只有 btn1 按钮的权限，所以 btn1 按钮显示，其他按钮隐藏。
- 页面路由配置：
const routes = [{path: "/home",name: "home",component: Home,meta: {permissons: ["btn1"],},},{path: "/about",name: "about",component: About,meta: {permissons: ["btn2", "btn3"],},},
];
- 页面路由切换时，根据路由的
meta.permissons列表，动态显示或隐藏按钮。
Vue3 组合式 api 使用自定义指令
Vue3 组合式 api 允许我们在 setup 函数中使用组合式 api，包括 directives、provide、inject、watchEffect 等。
在 setup 函数中使用自定义指令，需要先注册自定义指令，然后在 directives 选项中添加自定义指令的名称。
import { ref, onMounted } from "vue";export default {name: "App",setup() {const count = ref(0);const increment = () => {count.value++;};onMounted(() => {console.log("mounted");});return {count,increment,};},directives: {hasPermi: {mounted(el, binding) {// 获取权限列表const permissons = binding.instance.proxy.$route.meta.permissons;// 获取按钮的名称const btnName = binding.arg;// 获取按钮的显示隐藏状态let show = false;// 遍历权限列表，判断按钮是否显示for (let i = 0; i < permissons.length; i++) {if (permissons[i] === btnName) {show = true;break;}}// 根据显示隐藏状态，显示或隐藏按钮if (show) {el.style.display = "block";} else {el.style.display = "none";}},},},
};
- 注册自定义指令：
directives: {hasPermi: {mounted(el, binding) {// 获取权限列表const permissons = binding.instance.proxy.$route.meta.permissons;// 获取按钮的名称const btnName = binding.arg;// 获取按钮的显示隐藏状态let show = false;// 遍历权限列表，判断按钮是否显示for (let i = 0; i < permissons.length; i++) {if (permissons[i] === btnName) {show = true;break;}}// 根据显示隐藏状态，显示或隐藏按钮if (show) {el.style.display = "block";} else {el.style.display = "none";}},},
},
- 在页面中使用自定义指令：
<button v-hasPermi="'btn1'">按钮1</button>
<button v-hasPermi="'btn2'">按钮2</button>
<button v-hasPermi="'btn3'">按钮3</button>
其中，btn1、btn2、btn3 是权限列表，页面中只有 btn1 按钮的权限，所以 btn1 按钮显示，其他按钮隐藏。
- 页面路由配置：
const routes = [{path: "/home",name: "home",component: Home,meta: {permissons: ["btn1"],},},{path: "/about",name: "about",component: About,meta: {permissons: ["btn2", "btn3"],},},
];
- 页面路由切换时，根据路由的
meta.permissons列表，动态显示或隐藏按钮。
自定义指令的注意事项
- 自定义指令的名称，需要以
v-开头。 - 自定义指令的表达式，可以动态修改指令的行为。
- 自定义指令的
bind、update、unbind函数，可以接收三个参数。 - 自定义指令的
bind、update、unbind函数，可以返回false，阻止默认行为。 - 自定义指令的
update函数，可以接收oldVnode参数，可以获取指令所在的旧虚拟节点。 - 自定义指令的
unbind函数，可以接收vnode参数，可以获取指令所在的虚拟节点。