多个弹窗的设置

需要设置多个弹窗时，需要考虑：

一.各自分开，零活设置，代码较多

 1. 绑定移入移除分别设置，设置计时器

//界面语言
@mouseenter.native="languageShow = true;switchingShow = false;" @mouseleave.native="getlanguageShow"

函数代码

// 移入界面语言
    getlanguageShow() {
      this.setTimeLange = setTimeout(() => {
        if (this.hiddenFlag) {
          // 在弹窗里显示
          this.languageShow = true
        } else {
          this.languageShow = false
        }
      }, 500);
    },

二.利用排他性，绑定的位置较多

每一列都绑定一个函数，利用排他性，只显示一个，其他不管

//不显示弹窗的绑定 @moauseover.native="showBox(0)" 传参为0
//显示弹窗的绑定  @mouseover.native="showBox(3)" 传参为3


//调用的函数
showBox(index) {
      if (index == 1)
        //弹窗绑定ref 设置display="none"
        this.$refs.languageBox.style.display = 'block'
      else
        this.$refs.languageBox.style.display = 'none'
      if (index == 2)
        this.$refs.switchingBox.style.display = 'block'
      else
        this.$refs.switchingBox.style.display = 'none'
    },

//弹窗处
ref="switchingBox" style="display: none;" @mouseleave="showBox(0)"

小心点击弹窗外，列的弹窗没有及时关闭

解决：在绑定一个点击函数 @click="showBox(0)" 在整个div上

案例：

有弹窗和没有弹窗

弹窗