指令的简单应用

一：写个指令可以调转路由

1.pageLink.js:

export default {
    install (Vue) { 
        // 一个指令定义对象可以提供如下几个钩子函数(bind,inserted,update,componentUpdated,unbind)
        Vue.directive('link', {
            // 只调用一次，指令第一次绑定到元素时调用,el为指令所绑定的元素，可以用来直接操作 DOM,binding为一个对象，vnode为虚拟dom
            bind (el, binding, vnode) { 
                el.addEventListener('click', function () { 
                    vnode.context.$router.push(binding.value)
                }, false)
            }
        })
    }
}

　2.new Vue之前安装插件

import pageLink from '@/components/install/pageLink.js'
// 安装路由跳转
Vue.use(pageLink)

　3.使用方法

<button type="button" v-link="{name: 'myslide'}">跳转到slide</button>

　二，移动端中上部分内容固定结构

let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
Vue.directive('height-to-bottom', {
	inserted: function (el, binding) {
		let bottom = binding.value && binding.value.bottom || 0
		el.handler = function () {
			if (document.documentElement.clientHeight - el.getBoundingClientRect().top - bottom > 0) {
				el.style.height = document.documentElement.clientHeight - el.getBoundingClientRect().top - bottom + 'px'
			}
		}
		el.handler()		
		window.addEventListener(resizeEvt, el.handler, false)
	},
	unbind: function (el, binding) {
		if (!el.handler) return
		window.removeEventListener(resizeEvt, el.handler, false)
		el.handler = null
	}
})