自定义指令
面试官：你有写过自定义指令吗？自定义指令的应用场景有哪些？
一、什么是指令
开始之前我们先学习一下指令系统这个词
指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力
在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统
我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令
指令使用的几种方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
`v-xxx`
`v-xxx="value"`
`v-xxx="'string'"`
`v-xxx:arg="value"`
`v-xxx:arg.modifier="value"`
|
二、如何实现
注册一个自定义指令有全局注册与局部注册
全局注册主要是通过Vue.directive方法进行注册
Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数
1
2
3
4
5
6
7
8
|
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
|
局部注册通过在组件options选项中设置directive属性
1
2
3
4
5
6
7
8
| directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
|
然后你可以在模板中任何元素上使用新的 v-focus property，如下：
自定义指令也像组件那样存在钩子函数：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用unbind：只调用一次，指令与元素解绑时调用
所有的钩子函数的参数都有以下：
el：指令所绑定的元素，可以用来直接操作 DOM
```
binding
property
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
：
- `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` 编译生成的虚拟节点
- `oldVnode`：上一个虚拟节点，仅在 `update` 和 `componentUpdated` 钩子中可用
> 除了 `el` 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 `dataset` 来进行
举个例子：
```html
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
<script>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // "white"
console.log(binding.value.text) // "hello!"
})
</script>
|
三、应用场景
使用自定义指令可以满足我们日常一些场景，这里给出几个自定义指令的案例：
- 表单防止重复提交
- 图片懒加载
- 一键 Copy的功能
表单防止重复提交
表单防止重复提交这种情况设置一个v-throttle自定义指令来实现
举个例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
Vue.directive('throttle', {
bind: (el, binding) => {
let throttleTime = binding.value;
if (!throttleTime) {
throttleTime = 2000;
}
let cbFun;
el.addEventListener('click', event => {
if (!cbFun) {
cbFun = setTimeout(() => {
cbFun = null;
}, throttleTime);
} else {
event && event.stopImmediatePropagation();
}
}, true);
},
});
<button @click="sayHello" v-throttle>提交</button>
|
图片懒加载
设置一个v-lazy自定义指令完成图片懒加载
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| const LazyLoad = {
install(Vue,options){
let defaultSrc = options.default;
Vue.directive('lazy',{
bind(el,binding){
LazyLoad.init(el,binding.value,defaultSrc);
},
inserted(el){
if('IntersectionObserver' in window){
LazyLoad.observe(el);
}else{
LazyLoad.listenerScroll(el);
}
},
})
},
init(el,val,def){
el.setAttribute('data-src',val);
el.setAttribute('src',def);
},
observe(el){
let io = new IntersectionObserver(entries => {
let realSrc = el.dataset.src;
if(entries[0].isIntersecting){
if(realSrc){
el.src = realSrc;
el.removeAttribute('data-src');
}
}
});
io.observe(el);
},
listenerScroll(el){
let handler = LazyLoad.throttle(LazyLoad.load,300);
LazyLoad.load(el);
window.addEventListener('scroll',() => {
handler(el);
});
},
load(el){
let windowHeight = document.documentElement.clientHeight
let elTop = el.getBoundingClientRect().top;
let elBtm = el.getBoundingClientRect().bottom;
let realSrc = el.dataset.src;
if(elTop - windowHeight<0&&elBtm > 0){
if(realSrc){
el.src = realSrc;
el.removeAttribute('data-src');
}
}
},
throttle(fn,delay){
let timer;
let prevTime;
return function(...args){
let currTime = Date.now();
let context = this;
if(!prevTime) prevTime = currTime;
clearTimeout(timer);
if(currTime - prevTime > delay){
prevTime = currTime;
fn.apply(context,args);
clearTimeout(timer);
return;
}
timer = setTimeout(function(){
prevTime = Date.now();
timer = null;
fn.apply(context,args);
},delay);
}
}
}
export default LazyLoad;
|
一键 Copy的功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| import { Message } from 'ant-design-vue';
const vCopy = {
bind(el, { value }) {
el.$value = value;
el.handler = () => {
if (!el.$value) {
Message.warning('无复制内容');
return;
}
const textarea = document.createElement('textarea');
textarea.readOnly = 'readonly';
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
textarea.value = el.$value;
document.body.appendChild(textarea);
textarea.select();
const result = document.execCommand('Copy');
if (result) {
Message.success('复制成功');
}
document.body.removeChild(textarea);
};
el.addEventListener('click', el.handler);
},
componentUpdated(el, { value }) {
el.$value = value;
},
unbind(el) {
el.removeEventListener('click', el.handler);
},
};
export default vCopy;
|
关于自定义指令还有很多应用场景，如：拖拽指令、页面水印、权限校验等等应用场景
参考文献