技术小结

Hello大家周末好！今天给大家分享一下最近工作中遇到的问题。在项目中如果大家不用UI框架的时候比如需要写一个效果是弹框然后弹框弹出以后点击弹框以外的DOM然后让弹框消失或者做一个操作等等的需求！（看代码）

主要部分：
		   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 clickoutside;

然后在需要的页面引入：

    <template>
	  <div
	    class="box animated"
	    :class="{ 'bounceInRight' : show , 'bounceOutRight' : !show }"
	    v-show="startShow"
	    :style="{width:trck?'80%':'40%'}"
	    v-clickoutside="handleClose"   //绑定自定义指令 handleClose这个函数是你点击别的DOM的时候需要做的一个操作
	  >
	    <slot name="header"></slot>
	    <div class="sub">
	      <slot name="main"></slot>
	      <div class="subAdd" @click="subAdd()">
	        <i :class="{'el-icon-arrow-left' : !trck , 'el-icon-arrow-right' : trck}"></i>
	      </div>
	    </div>
	    <slot name="footer"></slot>
	  </div>
	</template>
	<script>
	import "animate.css";
	import clickoutside from "../../api/clickoutside.js";
	export default {
	  directives: { clickoutside },   //自定义vue指令
	  data() {
	    return {
	      show: false,
	      startShow: false,
	      width: "40%",
	      trck: false,
	      num: 0
	    };
	  },
	  methods: {
	    subAdd() {
	      this.trck = !this.trck;
	    },
	    handleClose() {
	      this.show = false;
	      this.$parent.trck = false;
	    }
	  }
	};
	</script>

element-ui的Input组件绑定回车时间的时候需要加修饰符 @keyup.enter.native
而原生的input框只需要 @keyuo.enter.native，给router-link绑定点击事件也是需要添加修饰符 @click.native。

谢谢大家 ， 溜了 溜了 溜了