elementUI popover弹框 条件控制显示和隐藏

应用场景：每个楼层下都有多个点位，点击点位弹出对应的详细信息，点击其他的点位时，上个点位的弹框要关闭，切换楼层时，上个楼层的弹框也要关闭
实现原理： 通过控制条件添加不同的类名，设置对应的样式

第一步、添加控制条件 :content=“showPoptip”
第二步、根据显示条件添加相应类名

<div 
     v-for="(item,i) in groupData" :key="i"
      @click="handleShowInfo(item)"
      :style="{
          left: item.left + 'px',
          top: item.top + 'px',
          position: 'absolute'
      }">
	<el-popover
	            trigger="click"
	            :content="showPoptip"
	            :popper-class="showPoptip === 'true' ? 'modal_popper' :'hidePopper'"
	        >
	        <div class="index_container">弹框的展示信息</div>
	        <div slot="reference" class="icon_container">
	                <div class="group_num">点击展示弹框</div>
	         </div>
	 </el-popover>
 </div>

逻辑：

//点击点位将showPoptip置为true，添加`modal_popper`的类名
handleShowInfo(){
            this.showPoptip = 'true'
 }
 // 切换楼层将所有弹框关掉，将`showPoptip`置为false，添加`hidePopper`的类名
handleNodeClick() {
            this.showPoptip = 'false'
 }

样式：

// 有弹框时的弹框样式
.modal_popper.el-popover{
    padding: 0!important;
    background: transparent!important;
    border: none;
    box-shadow: 0 0 15px #faab3d;
}
// 无弹框时直接隐藏
.hidePopper{
  display: none;
}