在点击除自身之外触发自定义指令

const clickoutsideObj = { // 初始化指令
    bind (el, binding, vnode) {
        function documentHandler (e) {
            // 这里判断点击的元素是否是本身，是本身，则返回
            if (el.contains(e.target)) {
                return false;
            }
            // 判断指令中是否绑定了函数
            if (binding.expression) {
                // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                binding.value(e);
            }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener('click', documentHandler);
    },
    update () {},
    unbind (el, binding) { // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
    }
}
export default {
    install: (Vue) => {
        Vue.directive('clickoutside', clickoutsideObj);
    }
};


index.js

import permission from './permission';
import loadmore from './loadmore';
import clickoutside from './clickoutside';

export default {
    permission,
    loadmore,
    clickoutside
};


在man中引入


<div class="update-content" v-clickoutside="directiveDialogChange">

directiveDialogChange () {
            if (this.cursorEditFlag || this.confirmFlag) {
                this.cursorEditFlag = false
                this.drawer = true
                return
            }
            this.drawer = false
        }
    //或
    directiveDialogChange () {
      if (this.cursorEditFlag || this.confirmFlag) {
        this.cursorEditFlag = false
        this.drawer = true
        this.setLook = false
        return
      }
      if (this.checkFormDataChange && this.drawer) {
        if (this.setLook) {
          return false
        } else {
          this.setLook = true
          this.$confirm('更新内容没有保存,离开后不会保存,是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.drawer = false
              this.setLook = false
            })
            .catch(() => {
              self.drawer = true
              this.setLook = false
            })
        }
        return false
      }
      this.drawer = false
    },
    

**在点击编辑图标显示下拉框，并给下拉框加上自定义指令，
在点击下拉框外的时候，切换flag，隐藏框，显示图标。
**
如果点击的不是自定义指令绑定的dom元素，则会触发v-clickoutside后的函数， 这个函数里面要做一个辨识，防止一直触发在里面改变的状态（会陷入死循环）

<div class="label-content" v-show="!ableObj.weekDataIsble">{{ periodName}}<span class="surplus">剩余<span class="surplus-day">{{dateCount}}</span>天</span><i class="el-icon-edit edit-change" @click="openEdit('weekDataIsble')"></i></div>
          <el-select v-model="form.period" placeholder="请选择" v-show="ableObj.weekDataIsble" @change="closeObj('weekDataIsble')" v-clickoutside="changeStatusDate">
            <el-option
              v-for="item in allPeriodList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          
          data(){
           return{
           dataClick:0
           }
          }
          
          
      自定义指令对应的方法
    changeStatusDate () {
      if (this.dataClick === 1) {
        this.dataClick = 0
        return false
      }
      if (this.ableObj.weekDataIsble) {
        this.$set(this.ableObj, 'weekDataIsble', false)
      } else {
        return false
      }
    },
    
    
    点击触发的事件
    openEdit (type) {
      switch (type) {
        case 'pesonIsble':
          this.firstClick = 1
          break
        case 'lookIsable':
          this.lookClick = 1
          break
        case 'weightIsble':
          this.weightClick = 1
          break
        case 'weekDataIsble':
          this.dataClick = 1
          break
      }
      for (let key in this.ableObj) {
        this.ableObj[key] = false
      }
      this.$set(this.ableObj, type, !this.ableObj[type])
    },