vue---获取全局点击事件解决点击框外区域框隐藏

问题描述：如图

解决方法：

1、解决思路：设置标志【selectDeptFlag】，当【this.selectDeptFlag=true】时框显示，【this.selectDeptFlag=false】时框隐藏。当点击非框内的的区域（定义全局点击事件），设置【this.selectDeptFlag=false】，当点击框内区域【this.selectDeptFlag=true】，当点击【选择部门】按钮则设置【this.selectDeptFlag = !this.selectDeptFlag】；注意给按钮和框的点击事件加上阻止冒泡，不加的话会受全局点击事件冒泡影响。

2、具体方法如下：

（1）【选择部门】按钮和【选择上级部门】框页面代码如下：

 <el-button icon="el-icon-s-operation" @click.stop="selectDept">选择部门</el-button>
              <!-- 选择上级部门框 -->
              <div class="dept-list" v-show="selectDeptFlag" @click.stop="showSelectDept">
                <div>
                  <div class="title">选择上级部门</div>
                  <hr />
                  <div>
                    <el-tree
                      :data="deptTree"
                      id="dept-tree"
                      node-key="id"
                      default-expanded-all
                      :props="deptTreeProps"
                      :expand-on-click-node="true"
                      @node-click="selectParentDept"
                    >
                      <div class="tree-node-group" slot-scope="{ node, data }">
                        <span class="tree-node-title">
                          <span class="node-label">{{ node.label}}</span>
                        </span>
                      </div>
                    </el-tree>
                  </div>
                </div>
              </div>

（2）定义全局点击事件：

在【main.js】中定义全局点击函数

// 定义全局点击函数
Vue.prototype.globalClick = function(callback) {
  document.getElementById("content").onclick = function() {
    callback();
  };
};

（3）在组件中调用全局点击函数，并在全局函数中调用【hideSelectDept】，实现隐藏【选择上级部门】框。

  mounted: function() {
    //隐藏选择上级部门框
    this.globalClick(this.hideSelectDept);
  },
methods:{
    // 隐藏选择上级部门
    hideSelectDept() {
      this.selectDeptFlag = false;
    }}

（4）在【选择部门】按钮和框的点击事件加上阻止冒泡。【@click.stop="..."】

methods:{
    // 点击选择部门按钮，控制框显示与否
    selectDept() {
      this.selectDeptFlag = !this.selectDeptFlag;
    },
    // 显示选择上级部门
    showSelectDept() {
      this.selectDeptFlag = true;
    },
    // 隐藏选择上级部门
    hideSelectDept() {
      this.selectDeptFlag = false;
    }
}