记录一个vue directive实现点击指令外部区域调用函数的方案

最新推荐文章于 2024-03-21 15:38:06 发布

weixin_34240520

最新推荐文章于 2024-03-21 15:38:06 发布

阅读量820

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/wangch5453/blog/2875875

版权

2019独角兽企业重金招聘Python工程师标准>>>

根据directive提供的API来写一个点击外部区域可以让其下拉列表消失的菜单

<div id="app" v-clock>
 <div class="main" v-clickoutside="handleClose">
  <button @click="show = !show">点击显示下拉菜单</button>
  <div class="dropdown" v-show="show">
   <p>下拉框内容，点击外面区域可以关闭</p>
  </div>
</div>

var app = new Vue({
 el: '#app',
 data: {
  show: false
 }，
methods: {
 handleClose() {
  this.show = false;
 }
}
})
 
Vue.directive('clickoutside', {
 bind: function(el, binding, vode) {
  function documentHandler (e) {
   if (el.contains(e.target)) {
    return false
   }
   if (binding.expression) {
    binding.value(e)
   }
  }
  el.__vueClickOutSide__ = documentHandler
  document.addEventListener('click', documentHandler)
 },
 unbind: function(el, binding) {
  document.removeEventListener('click', el.__vueClickOutSide__)
  delete el.__vueClickOutSide__
 }
})

要在document上绑定click事件，所以在bind钩子内声明了一个函数documentHandler，并将它作为句柄定在document的click事件上。documentHandler函数做了两个判断，第一个是判断点击的区域是否是指令所在的元素内部，如果是，就跑出函数，不信下继续执行

contains方法是用来判断元素A是否包含了元素 B，包含返回true，不包含返回false

<div id="parent">
 父元素
 <div id="children">子元素</div>
</div>

var a = doucment.getElemengById('parent')
var b = doucment.getElemengById('children')
console.log(A.contains(B)) // true
console.log(B.contains(A)) // false

第二个判断是当前的指令v-clickoutside有没有写表达式，在该自定义指令中，表达式应该是第一个函数，在过滤了内部元素后，点击外面任何区域应该招待用户表达式中的函数，所以binding.value就用来执行上下文methods中指定的函数的

参考： https://www.jb51.net/article/127236.htm

转载于:https://my.oschina.net/wangch5453/blog/2875875