Vue 创建自定义指令 以及创建自定义指令相关属性说明
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参数，可以获取指令所在的虚拟节点。