vue 自定义指令

自定义指令小案例

<!--摘自文档
    el：指令所绑定的元素，能够用来直接操做 DOM 。
    binding：一个对象，包含如下属性：
    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 来了解更多详情。
    
    bind：只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置。
    inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不必定已被插入文档中)。
    update：所在组件的 VNode 更新时调用，可是可能发生在其子 VNode 更新以前。指令的值可能发生了改变，也可能没有。可是你能够经过比较更新先后的值来忽略没必要要的模板更新 (详细的钩子函数参数见下)。
    componentUpdated：指令所在组件的 VNode 及其子 VNode 所有更新后调用。
    unbind：只调用一次，指令与元素解绑时调用。
-->
Vue.directive('dirName', {
    inserted (el, binding, vnode) {
        const sclass = vnode.data.attrs['dirName'] //获取自定义属性值
        const classNames = el.className // el: dom元素，能够进行dom操做
        if (binding.value) {  
            ...
        } else {
            ...
        }
    },
    componentUpdated (el, binding, vnode) {
        if (binding.value) {
            ...
        } else {
            ...
        }
    },
    unbind (el, binding, vnode) {
        if () {
            
        } else {
            
        }
    }
})
复制代码

下面来看个简单的例子

<div class="index">
   <button @click="show=!show">toggle</button>
	<div class="box"  v-toggle-class="show" :toggle-class="['top_in', 'top_out']" ref='test'></div>
</div>
复制代码

.slide_top_in
	animation slideDown .3s forwards
.slide_top_out
	animation slideUp .3s forwards
.slide_right_in
	animation slideRightIn .3s forwards
.slide_right_out
	animation slideRightOut .3s forwards
.box
	width 200px;
	height 150px
	background-color pink
	position absolute
	left 0
	top 0
	right 0
	bottom 0
	margin auto
@keyframes slideUp {
    0% {
    	transform translateY(0%)
    	opacity 1
    }
    100% {
    	transform translateY(-100%)
    	opacity 0
    }
}
@keyframes slideDown {
    0% {
    	transform translateY(-100%)
    	opacity 0
    }
    100% {
    	transform translateY(0%)
    	opacity 1
    }
}


@keyframes slideRightIn {
    0% {
    	transform translateX(100%)
    	opacity 0
    }
    100% {
    	transform translateX(0%)
    	opacity 1
    }
}
@keyframes slideRightOut {
    0% {
    	transform translateX(0%)
    	opacity 1
    }
    100% {
    	transform translateX(100%)
    	opacity 0
    }
}
复制代码

import Vue from 'vue'

Vue.directive('toggle-class', {
    inserted (el, binding, vnode) {
    	let klass = vnode.data.attrs['toggle-class']
    	if (binding.value) {
    		el.className += ` slide_${klass[0]}`
    	} else {
    		el.className += ` hide`
    		
    	}
    	console.log(binding.value, el.className)
    },
    
    componentUpdated (el, binding, vnode) {
    	el.className = el.className.replace(' hide', '')
    	let klass = vnode.data.attrs['toggle-class']
    	if (binding.value) {
    		el.className = el.className.replace(` slide_${klass[0]}`, '')
    		el.className = el.className.replace(` slide_${klass[1]}`, '')
    		el.className += ` slide_${klass[0]}`
    	} else {
    		el.className = el.className.replace(` slide_${klass[0]}`, '')
    		el.className = el.className.replace(` slide_${klass[1]}`, '')
    		el.className += ` slide_${klass[1]}`
    	}
    	console.log(binding.value, el.className)
    }
})
复制代码