Vue如何创建自定义指令?
前言
什么是vue指令了？ Vue自带的指令很多，v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text... 原来这就是指令。
Vue如何创建自定义指令?
但是这些指令都是比较偏向于工具化，有些时候在实现具体的业务逻辑的时候，发现不够用，如何来自定义指令？
全局指令
第一步
最好建立一个全局的命令文件例如：directive.js 利用Vue.directive()建立一个全局命令，并将它暴露出来，例如一个focus 让表单自动聚焦
// directive.js
import Vue from 'vue';
const focus = Vue.directive('focus', {
// 指令的钩子函数--第一次绑定元素时调用
bind(el) {
console.warn('指令的钩子函数：bind');
console.log(el);
},
/**
* inserted 在元素被插入到页面中的时候调用---vm实例的钩子函数
* binding是一个对象，包括指令的所有信息
*/
inserted: function (el, binding) {
el.focus();
el.setAttribute('placeholder', 'web秀');
// 自动聚焦，input提示placeholder输入 "web秀"
// 其中foo是指令参数--可以打印看看
console.log(binding.arg);
},
// 指令的钩子函数，只调用一次，指令与元素解绑时调用（即当标签被删除时）。
unbind() {
// 当指令所在的元素，从页面中移除的时候，unbind钩子函数会被执行
console.warn('指令的钩子函数：unbind');
}
})
export {focus}第二步
在main.js（入口JS文件）中将它引入，可以省略文件后缀
// main.js
import focus from 'xxx/directive'这样任何一个Vue文件只有使用v-focus(指令名)，就可以很方便的自动聚焦了。
<input type="text" v-focus:foo="我是指令参数">局部指令
用法和全局指令一样，只是在单个Vue实例页面内部定义，只能被这一个实例使用，而全局可以被多个实例使用。
<div>
<input type="text" v-focus:foo="我是指令参数">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
directives:{
focus:{
// 创建局部指令
inserted: function (el, binding) {
el.focus();
el.setAttribute('placeholder', 'web秀');
})
}
}
})
</script>自定义指令钩子函数参数介绍
函数
- bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
- inserted：被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- componentUpdated：所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
- unbind：只调用一次，指令与元素解绑时调用。
参数
- el：指令所绑定的元素，可以用来直接操作 DOM 。
- binding：一个对象，包含以下属性： name：指令名，不包括 v- 前缀。 value：指令的绑定值，例如：v-my-directive="1 + 1", value 的值是 2。oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 expression：绑定值的字符串形式。例如 v-my-directive="1 + 1" ，expression 的值是 "1 + 1"。 arg：传给指令的参数。例如 v-my-directive:foo，arg 的值是 "foo"。 modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
- vnode：Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
学以致用
最后我们来写一个非常实用的栗子，页面倒计时，请上眼
function padZero(number) {
let tmp = "0" + number;
return tmp.slice(-2, tmp.length);
}
function countDown(diff) {
// 剩余毫秒
let millisecond = diff % 1000;
// 总秒
let seconds = (diff - millisecond) / 1000;
// 剩余秒数
let realseconds = seconds % 60;
// 剩余分钟数
let minutes = (seconds - realseconds) / 60;
// let realminutes = seconds % 60;
// let hours = (diff - minutes - seconds) % 86400;
return diff >= 0 ? padZero(minutes) + "分" + padZero(realseconds) + "秒" : "";
}
...
directives: {
timer: {
inserted(el, binding, vnode) {
const me = vnode.context;
const flight = me.$store.state.flight;
// 获取参数，截止时间与当前时间差（单位毫秒）
let val = +binding.value;
let timer = window.setInterval(() => {
val -= 1000; // 每秒减1000毫秒/1秒
let instance = countDown(val);
if (!instance) {
// 倒计时结束，do something
if (timer) {
window.clearInterval(timer);
timer = null;
}
return;
}
// 格式化的日期插入到页面
el.innerHTML = instance;
}, 1000);
}
}
}
...页面可以直接使用
<!-- 截止时间与当前时间差（单位毫秒） -->
<span v-timer='100000'></span>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018年11月19日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录