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)
    }
})
複製代碼