vue 封装自定义指令，再点击非下拉框的位置就隐藏下拉框

描述 ： 移动端常见的样式下拉框，当下拉框弹出的时候，我们点击别的位置就隐藏下拉框

操作：

1. 新建directive.js文件

`

/**
 * 点击空白区域,隐藏下拉选框
 */

const clickOutside = {

  // 一般在vue项目中的main.js中
  // 添加点击空白处的指令
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      //检查点击是在外面的el和他的子元素
      if (!(el == event.target || el.contains(event.target))) {
        // 如果是，则调用属性值中提供的方法
        vnode.context[binding.expression](event)
      }
    }
    document.body.addEventListener('click', el.clickOutsideEvent)
  },
  unbind: function (el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  }

};

export default clickOutside

`

1. 为了再项目中全局使用我们再main.js文件中全局引入自定义指令

import utilDirecitve from './assets/js/directive'
Vue.directive('clickOutside', utilDirecitve)

1. 再页面中使用

html标签：
  <div v-click-outside="hideBox">

 methods方法：
 hideBox () {
      this.selectMatch = false;
      this.isShowSelect = false;
      this.selectStatus = true
    },