手动a-tooltip的显示与隐藏

a-tooltip显示与隐藏

场景：有很多弹框，但是弹框相互间可能存在遮挡，第一个弹框是点击出现提示，第二个和第三个是获得焦点就出现提示

a-tooltip自带了一个属性，trigger可以控制弹框的显示与隐藏，但是我们有时想自己设置触发弹框的时机,visibleChange可以监听到弹框的显示变化

初始方案**：display,利用display:none来实现弹框1的隐藏

问题：存在多个获得焦点显示自己的弹框，隐藏点击的弹框1时，（比如显示弹框3，隐藏1和2）弹框1后面需要点击两次，才会显示

解决方法，使用v-model来控制弹框的显示与隐藏

<a-tooltip
      trigger="click"
      overlayClassName="firstClass"
      v-model="isTooltip"
    >
      <div @click="tipChange">这是弹框1的内容</div>
      <template slot="title">
        <div>
          111111111111111111111
        </div>
      </template>
    </a-tooltip>

    <a-tooltip @visibleChange="secondChange">
      <div>这是第二个需要弹框的地方</div>
      <template slot="title">
        <div>
          222222222222222222222222222222222
        </div>
      </template>
    </a-tooltip>

    <a-tooltip @visibleChange="thirdChange">
      <div>这是第三个需要弹框的地方</div>
      <template slot="title">
        <div>
          3333333333333333333333333333333333
        </div>
      </template>
    </a-tooltip>

   data(){
     return{
        isTooltip:false
     }
   }

   secondChange(isShow) {
      console.log(isShow);
      if (isShow) {
        const doms = document.querySelectorAll(".firstClass");
        if (doms) {
          // doms[0].style.display=none
          Array.from(doms).forEach((item) => {
          // 如果使用display:none来控制显示与隐藏，如果只有弹框2，没有3，则正常，但是同时有多个时，那么              会出现一个bug,弹框2或3显示后，弹框1需要显示，则需要点击两次
            // item.style.display = "none";
            this.isTooltip = false;
          });
        }
      }
    },
    thirdChange(isShow) {
      if (isShow) {
        const doms = document.querySelectorAll(".firstClass");
        if (doms) {
          // doms[0].style.display=none
          Array.from(doms).forEach((item) => {
            // item.style.display = "none";
            this.isTooltip = false;
          });
        }
      }
    },
    tipChange() {
      this.isTooltip = !this.isTooltip;
    },

},
tipChange() {
this.isTooltip = !this.isTooltip;
},