element Popover 弹出框循环列表控制显示和隐藏(非表格)

最新推荐文章于 2024-07-19 11:42:07 发布

missGril

最新推荐文章于 2024-07-19 11:42:07 发布

阅读量2.6k

点赞数

分类专栏： element 文章标签： vue

本文链接：https://blog.csdn.net/sinat_41694829/article/details/116200220

版权

本文介绍了如何在Vue中使用Popover组件，实现列表模块中只有一个弹框显示，并能通过点击同一模块实现弹框的显示与隐藏。通过设置每个模块的ref和利用value属性控制显示隐藏，同时配合v-model的visible属性，达到预期效果。

摘要由CSDN通过智能技术生成

弹出框两个需求，第一是列表模块只能有一个模块弹框显示。第二是点击同一个模块进行显示和隐藏
文字描述可能不太恰当，看图
在这里插入图片描述
如图，在图片上点击第五个模块，出现此模块的弹框，再次点击其他模块，此模块的弹框消失
接下来上代码：

<div class="park-right">
   <el-popover
           placement="top-start"
           title="车位信息"
           width="250"
           trigger="manual"
           v-model="item.visible"
           ref="popover"
   >
       <ul class="potNo-detail">
           <li>
               车位号：{
   {
   item.potNo}}
           </li>
           <li><