vue自定义指令实现点击元素以外区域隐藏当前元素

经常接到这样的需求，自己实现一个弹窗，点击弹窗以外地方隐藏当前弹窗，抽空安排一下vue自定义指令。

实现思想

1. 监听点击事件
2. 判断点击事件target会否为当前dom
3. 注意取消监听事件

实现过程

1. 实现clickoutside .js

const clickoutside = {
  bind(el, binding) {
    const documentHandler = (e) => {
      if (el.contains(e.target)) return false
      if (binding.expression) {
        binding.value(e)
      }
    }
    el.documentHandler= documentHandler
    document.addEventListener('click', documentHandler, false)
  },
  unbind(el) {
    document.removeEventListener('click', el.documentHandler, false)
    delete el.documentHandler
  }
}

export default clickoutside

2. 实现vue中自定义组件的目录index.js

import clickoutside from './clickoutside'

const directives = {
  clickoutside
}
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key])
    })
  }
}

3. main.js中统一注册自定义指令

import Vue from 'vue'
import App from './App.vue'
import directives from '@/directives/index.js'

Vue.use(directives)

new Vue({
  render: h => h(App),
}).$mount('#app')

4. 页面使用

<template>
  <div class="dom" v-if="isShow" v-clickoutside="()=>{}">
  </div>
</template>

<script>
export default {
  data(){
  	return{
	  isShow: false
	}
  }
}
</script>

<style lang="less" scoped>

</style>