在做用户管理中,部门很有可能是一个tree树状图,那就需要点击 input显示 tree组件,点击空白区域隐藏tree
图一 是点击输入框的时候,组件显示了出来,图二是点击空白区域组件隐藏.下面看看代码实现吧
1. 需要 给 弹框 el-dialog 一个ID值
<el-dialog :title="messages" :visible.sync="dialogVisible" width="35%" ref="dialogData" id="dialog">
</el-dialog>
2.给组件树状图包装一个div ,绑定treeStatus treeStatus 在data中设置为treeStatus:false。在给需要点击的input框一个ID
<el-dialog :title="messages" :visible.sync="dialogVisible" width="35%" ref="dialogData" id="dialog">
<el-input placeholder="请选择部门" v-model='detaiLabel' id="locationName" ></el-input>
<div class="mask" v-show="treeStatus">
<el-tree :data="departList" node-key="id" :props="defaultProps" @node-click="handleNodeClick" show-checkbox ref="tree" @check-change="checkChange" :check-strictly="true" ></el-tree>
</div>
</el-dialog>
3. js 部分
methods:{
ready(){
let elDialog=document.getElementById("dialog")
elDialog.addEventListener('click',(e)=>{
let sp3 =document.getElementById("locationName")
if(sp3.contains(e.target)){
this.treeStatus=true
}else{
this.treeStatus=false
}
})
}
}
4.在mounted中调用 ready
mounted() {
this.ready()
},
至此,效果就出现了。