问题描述:如图
解决方法:
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;
}
}