Vue自定义指令directive
指令的作用：操作DOM 。（参考官方文档）
一、分类
- Vue.directive:全局自定义指令
Vue.directive("test",(el,...rest)=>{
console.log(rest)
})
directive.png
参数1：指令名称
参数2：指令的配置项(函数、对象)
eg：（函数）
参数1：使用当前指令的元素
参数2：指令的详情信息
{ modifers:修饰符,value:指令的结果(它所对应的值) }
- 添加背景颜色、阻止冒泡App.vue
<div id="app">
<div v-test="'lxc'.substr(1,2)"
v-background="'green'">
</div>
<div v-event.stop="'green'"></div>
</div>
- Utils.js
需要将Utils.js在入口文件main.js中引入
Vue.directive("test", (el, { value }) => {
el.innerText = value;
})
Vue.directive("background", (el, { value }) => {
el.style.backgroundColor = value;
})
Vue.directive("event", (el, { value, modifiers }) => {
let { stop } = modifiers;
el.addEventListener("click", (e) => {
if (stop) {
e.stopPropagation();
}
value();
})
})
- directives:局部自定义指令
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
可以在模板中任何元素上使用新的
v-focus属性，如下：
<input v-focus>
- 拖拽案例：
允许设置两种修饰符modifiers：l——横向拖拽；t——纵向拖拽；l.t（默认）任意拖拽
<template>
<div id="app">
<div v-drag.t="flag" id="box"></div>
</div>
</template>
<script>
export default {
name: "App",
directives: {
drag(el, { modifiers, value }) {
if (value) {
var disX, disY;
var { l, t } = modifiers;
el.style.position = "absolute";
el.addEventListener("mousedown", mousedown);
function mousedown(e) {
disX = e.offsetX;
disY = e.offsetY;
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", up);
}
function move(e) {
var x = e.clientX - disX;
var y = e.clientY - disY;
if ((l && t) || (!l && !t) ) {
el.style.left = x + "px";
el.style.top = y + "px";
return;
}
if(l){
el.style.left = x + 'px'
return;
}
if(t){
el.style.top = x + 'px'
return;
}
}
function up() {
document.removeEventListener("mousemove", move);
document.removeEventListener("mouseup", up);
}
}
}
},
data() {
return {
flag: true,
msg: "lxc"
};
},
methods: {
handleToggle() {
this.flag = !this.flag;
}
}
};
</script>
<style>
#box {
width: 100px;
height: 100px;
background: #c33;
}
</style>
二、钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
-
bind
只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
-
inserted
当使用指令的元素被插入到父节点（#app）的时候被触发 (仅保证父节点存在，但不一定已被插入文档中)。处理获取光标的焦点。
-
update
只要当前元素不被移除，其他操作（虚拟DOM只要涉及元素的显示、隐藏，值和内容的改变等）几乎都会触发触发虚拟DOM更新，进而先触发updata,后触发componentUpdated这两个生命周期。
（display会触发，而visility则不会，因为前者涉及到了页面的回流）
-
unbind
只调用一次，指令与元素解绑时调用。
例：在元素解绑时，执行了下面的unbind。再次绑定时，又执行了bing和inserted.
unbind.pngimport Vue from "vue" Vue.directive("lxc", { bind() { console.log("bind"); }, inserted() { console.log("inserted"); }, update() { console.log("update"); }, componentUpdated() { console.log("componentUpdated"); }, unbind() { console.log("unbind"); } })
