element ui 弹框点击 显示tree组件，点击空白区域隐藏tree

在做用户管理中，部门很有可能是一个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()
  },

至此，效果就出现了。