vue中利用指令实现点击空白处隐藏div

 

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

<div id="navigation" :class="{'fold':isFold}" v-clickoutside="unFold">
</div>

<script>
	const clickoutside = {
		// 初始化指令
		bind(el, binding, vnode) {
			function documentHandler(e) {
				// 这里判断点击的元素是否是本身，是本身，则返回
				if (el.contains(e.target)) {
					return false;
				}
				// 判断指令中是否绑定了函数
				if (binding.expression) {
					// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
					binding.value(e);
				}
			}
			// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
			el.__vueClickOutside__ = documentHandler;
			document.addEventListener('click', documentHandler);
		},
		update() {},
		unbind(el, binding) {
			// 解除事件监听
			document.removeEventListener('click', el.__vueClickOutside__);
			delete el.__vueClickOutside__;
		},
	};
	
	export default {
		name:'navigation',
		data() {
			return {
				isFold:false,//隐藏与否
			}
		},
		directives:{clickoutside},
		methods:{
			unFold(){
				this.isFold = !this.isFold
			}
		}
	}
</script>

<style>
    .fold{
	    transform: translateX(-300px);
    }
    #navigation{
	    width:300px;
    	height: 100px;
	    transition: all .5s ease;
    }
</style>