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
    },