elementui 组件Popover弹出框点击内容区关闭弹出框的解决办法

小咪咪 2022-10-11 14:56 1182阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]

### 需求：点击图标显示选项，选中某一图标隐藏内容区。 ###

*  官方给的关闭方法是通过`v-model`设置显示或隐藏。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70 1]
 *  示例：

<el-popover
      placement="top"
      width="160"
      v-model="visible">
      <p>这是一段内容这是一段内容确定删除吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
      </div>
      <el-button slot="reference">删除</el-button>
    </el-popover>
    
    <script>
      export default {
        data() {
          return {
            visible: false,
          };
        }
      }
    </script>

*  我这里的需求是循环生成，通过绑定ref来控制显隐。(代码简写)

this.$refs[`popover-${index}`][0].doClose()

<el-row v-for="(item,index) in table" :key="index">
    	<el-col :span="2" :offset="1" class="position-2">
    		<el-popover placement="bottom" width="280" trigger="click" :ref="'popover-' + index">
    			<el-row>
    				<el-col :span="6">
    					<el-row class="display-center">
    						<img class="point-click" @click="changJoin(1,index)" width="30px"
    							src="../../../../public/img/datatools/2-A.png" alt="">
    					</el-row>
    					<el-row class="text-center">内连接</el-row>
    				</el-col>
    				<el-col :span="6">
    					<el-row class="display-center">
    						<img class="point-click" @click="changJoin(2,index)" width="30px"
    							src="../../../../public/img/datatools/2-B.png" alt="">
    					</el-row>
    					<el-row class="text-center">左连接</el-row>
    				</el-col>
    				<el-col :span="6">
    					<el-row class="display-center">
    						<img class="point-click" @click="changJoin(3,index)" width="30px"
    							src="../../../../public/img/datatools/2-C.png" alt="">
    					</el-row>
    					<el-row class="text-center">右连接</el-row>
    				</el-col>
    				<el-col :span="6">
    					<el-row class="display-center">
    						<img class="point-click" @click="changJoin(4,index)" width="30px"
    							src="../../../../public/img/datatools/2-D.png" alt="">
    					</el-row>
    					<el-row class="text-center">全连接</el-row>
    				</el-col>
    			</el-row>
    			<div slot="reference" class="point-click">
    				<img width="30px" src="../../../../public/img/datatools/2-A.png" alt="">
    			</div>
    		</el-popover>
    	</el-col>
    </el-row>
    
    //控制关闭
    changJoin(id,index) {
    	console.log(this.$refs[`popover-${index}`])
    	this.$refs[`popover-${index}`][0].doClose() 
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]: /images/20221005/b939a7484ec94cffbbb0b4a4363c0abb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70 1]: /images/20221005/a3f75b44d8bc46a1ad8ed864a5fa8f6a.png