自定义指定
举例
v-focus当页面加载时就获取到焦点
全局引用
//main.js文件
import Vue from 'vue'
Vue.directives('focus',{
inserted(el){
el.focus()
}
})
//组件中使用
<input type="text" v-focus></input>
局部引用
<template>
<div>
<input type="text" v-focus>
</div>
</template>
<script>
import Vue from "vue";
export default {
directives:{
focus:{
inserted(el){
el.focus()
}
}
}
};
</script>
<style scoped>
</style>
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
- update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind:只调用一次,指令与元素解绑时调用。
钩子函数参数
el:指令所绑定的元素,可以用来直接操作 DOM。
binding:一个对象,包含以下 property:
name:指令名,不包括 v- 前缀。
value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。
oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变 都可用。
expression:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。
arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。
modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
动态指定参数
指令的参数可以是动态的。例如,在 v-mydirective:[argument]=“value” 中,argument 参数可以根据组件实例数据进行更新!这使得自定义指令可以在应用中被灵活使用。
例:
//写死的
<template>
<div>
<p>Hello Word</p>
<p v-bin="200">Stick me 200px from the top of the page</p>
</div>
</template>
<script>
import Vue from "vue";
export default {
directives: {
bin: {
bind(el, binding, vnode) {
el.style.position = "fixed";
el.style.top = binding.value + "px";
}
}
}
};
</script>
<style scoped>
</style>
//动态的
<template>
<div>
<p>Hello Word</p>
<p v-bin:[left]="200">Stick me 200px from the top of the page</p>
</div>
</template>
<script>
import Vue from "vue";
export default {
directives: {
bin: {
bind(el, binding, vnode) {
el.style.position = "fixed";
let s = binding.arg
el.style[s] = binding.value + "px";
}
}
},
data(){
return{
left:'left'
}
}
};
</script>
<style scoped>
</style>
函数的简写
在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。比如这样写:
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
对象字面量
如果指令需要多个值,可以传入一个 JavaScript 对象字面量。记住,指令函数能够接受所有合法的 JavaScript 表达式。
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
案例
v-has绑定权限
新建一个文件permission
import Vue from "vue";
// 删除一个节点
const remove = (el) => el.parentNode.removeChild(el);
// 获取用户的权限
// 在这里我写死
let jurisdiction = ["1001", "1002", "1003", "1004"];
// 封装一个方法判断自定义指定上绑定的权限是否在用户权限中
export function hasPermission(userPermission, some) {
// 判断传过来是否为数组,不是的话则转换为数组
let userPermissionList = Array.isArray(userPermission)
? userPermission
: [userPermission];
let permissionList = jurisdiction; // 当前用户的权限列表
if (some) {
// some与every的区别在于some只要有一项满足就会返回true
return userPermissionList.some((e) => permissionList.includes(e + ""));
} else {
// every用于检测数组中的所有元素是否都符合指定条件
// every方法使用指定函数检测数组中的所有元素,如果数组中检测到有一个元素不满足,则整个表达式返回false,且剩下的元素不会在进行检测
// 如果所有元素满足条件,则返回true
return userPermissionList.every((e) => permissionList.includes(e + ""));
}
}
Vue.directive("has", {
inserted: (el, binding, vnode) => {
if (!hasPermission(binding.value, false)) {
el.style.display = "none";
remove(el);
}
},
});
main.js文件引入
import 'permission文件路径'
使用
<template>
<div>
<div v-has="['1001']">
旺财
</div>
<div v-has="['1005']">
莱福
</div>
</div>
</template>
<script>
import Vue from "vue";
export default {
};
</script>
<style scoped>
</style>
效果
只显示旺财,来福不显示