elementUI中的popover嵌套popover弹窗不能自动关闭

最新推荐文章于 2025-03-07 13:46:36 发布

前端小li

最新推荐文章于 2025-03-07 13:46:36 发布

阅读量5.6k

点赞数 3

分类专栏：前端 element 文章标签： css css3 elementui

本文链接：https://blog.youkuaiyun.com/HTML5_student/article/details/123346329

版权

前端同时被 2 个专栏收录

32 篇文章

订阅专栏

element

3 篇文章

订阅专栏

本文探讨了在Vue组件中遇到的popover嵌套问题，即当一个popover内部包含另一个popover时，导致子popover无法正常关闭。通过添加click事件及阻止事件冒泡，实现了外层popover关闭及内层popover的独立控制。详细代码示例展示了如何使用this.$refs和doClose方法来解决这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件中有个弹窗el-popover，这个弹窗里面又引入弹窗el-popover，这样相当于是popover嵌套，导致的问题就是子popover中的弹窗打开第二个的时候第一个不能自动关闭，就是这样
在这里插入图片描述
解决方法：
popover内部嵌套popover的方法，在外层popover的内容上添加click事件（注意是否需要.native），用this.$refs.XXX.doClose()方法关闭，同时触发内部popover的reference，需要添加click事件阻止事件冒泡，两者缺一不可（不阻止事件冒泡，就会造成内部popover打不开–实际上是打开了又关掉了）

直接上代码

 <el-table-column label="状态" width="180">
        <template slot-scope="scope"> 
            <div class="num">
                <el-popover
                    placement="bottom"
                    width="180"
                    trigger="click">
                    <div style=" border-bottom:1px solid #000;margin-bottom:5px" @click="tableTwoPopoverClick(scope.row)">
                        <div class="status-item" v-for="(item,index) of statuslist" :key="index"> 
                            <el-popover
                                placement="bottom-start" 
                                trigger="click"
                                :ref="`Pop${scope.row.id}`"
                                @show="handleStatusWarn(scope.row,index)">
                                    <div class="ColorBox">
                                        <div class="ColorBoxItem">1</div>
                                        <div class="ColorBoxItem">2</div>
                                        <div class="ColorBoxItem">3</div>
                                    </div>  
                                    <div slot="reference">
                                        <div class="monday-style-clickable" >
                                            <div class="color-option-box" :style="`margin-bottom:10px;background-color:${item.color}`">
                                                **
                                            </div>
                                        </div> 
                                    </div>
                            </el-popover>  
                        </div> 
                    </div>   
                    <div slot="reference">
                         <div>{{scope.row.name }}</div>
                    </div>
                </el-popover> 
            </div>
        </template> 
 </el-table-column>

//关闭其他popover
//给嵌套的子el-popover加ref，这样就能找到子popover。获取所有循环出来的el-popover，如果这个el-popover的索引值和当前弹出的索引值相同，则不关闭，否则关闭弹窗
handleStatusWarn(val,index){
      var e =window.event || arguments.callee.caller.arguments[0];
       e.stopPropagation();  
       let eleList = this.$refs[`Pop${val.id}`]
       eleList.forEach((i,j)=>{
	      if(j != index){
	         i.doClose()
	     	}
       })
},
//点击其他地方，popover消失，如果不写点击页面的其他地方，弹窗不会消失
tableTwoPopoverClick(val){
	  let eleList = this.$refs[`Pop${val.id}`]
	  eleList.forEach((i,j)=>{ 
	      i.doClose() 
	  })
}

修改后
在这里插入图片描述