手动a-tooltip的显示与隐藏

a-tooltip显示与隐藏

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

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

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

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

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

      
这是弹框1的内容
      
    

    
      
这是第二个需要弹框的地方
      
    

    
      
这是第三个需要弹框的地方
      
    

   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;
},