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