悬浮面板点击操作显示隐藏

<template>
<el-input readonly v-model="queryForm.dept" @focus="showDePanel = true" id="panel-one"
  style="max-width: 180px;height: 40px;">
</el-input>
<search-panel v-if="showDePanel" :list="departmentList" @get-node="getDeNode"
  @close-panel="showDePanel = false">
</search-panel>
<el-input readonly v-model="queryForm.business" @focus="showBuPanel = true" id="panel-two"
  style="max-width: 180px;height: 40px;">
</el-input>
<search-panel v-if="showBuPanel" :list="businessList" @get-node="getBuNode"
  @close-panel="showBuPanel = false">
</search-panel>
</template>
<script>
export default{
  methods:{
    handleGlobalClick(event) {
      const target = event.target;
      this.positionOne = document.querySelector('#panel-one'); // 输入框一
      this.positionTwo = document.querySelector('#panel-two'); // 输入框二
      if (this.positionOne && this.positionOne.contains(target)) {
        this.showDePanel = true;  // showDePanel为其中一个悬浮框显示隐藏的控制字段
      } else {
        this.showDePanel = false;
      }
      if (this.positionTwo && this.positionTwo.contains(target)) {
        this.showBuPanel = true;
      } else {
        this.showBuPanel = false;
      }
    },
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleGlobalClick);
  },
  watch: {
    showDePanel(newValue, oldValue) {
      if (newValue) {
        document.addEventListener('click', this.handleGlobalClick);
      } else {
        document.removeEventListener('click', this.handleGlobalClick);
      }
    },
    showBuPanel(newValue, oldValue) {
      if (newValue) {
        document.addEventListener('click', this.handleGlobalClick);
      } else {
        document.removeEventListener('click', this.handleGlobalClick);
      }
    },
  },
}
</script>