前端 element plus Popover气泡卡片 中再套个气泡卡片 点击第二个气泡框的时候第一个气泡框不会消失

当选中小气泡框中的多选框中 前面的这个气泡框会自己消失。 因为第一个气泡框使用的是【trigger="click"】 点击除气泡框本身的内容外其余都会消失。

因为气泡框会默认【将 popover 的下拉列表插入至 body 元素】,所有我们把它改为false即可。

这样在选中第二个气泡框中的多选框或者别的按钮之类的,都不会使第一个气泡框消失。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我理解您的问题是关于 element 组件下拉菜单退出时的确认,您需要在退出菜单时添加一个气泡确认。针对这个问题,我可以提供以下解决方案: 1. 使用 element Popover 组件,将其作为下拉菜单的子组件,并在菜单添加一个“退出”按钮。 2. 在“退出”按钮的点击事件触发 Popover 组件的显示,并在 Popover 组件添加确认信息和“确定”、“取消”按钮。 3. 根据用户的选择,可以在“确定”按钮的点击事件执行退出菜单的操作,或者在“取消”按钮的点击事件关闭 Popover 组件,返回到菜单。 以下是一个简单的代码示例,供参考: ```html <template> <el-dropdown> <el-button>下拉菜单</el-button> <el-dropdown-menu> <el-dropdown-item>菜单项 1</el-dropdown-item> <el-dropdown-item>菜单项 2</el-dropdown-item> <el-dropdown-item>菜单项 3</el-dropdown-item> <el-dropdown-item divided> <el-popover trigger="click" placement="bottom-end"> <p>确定退出菜单吗?</p> <div style="text-align: right; margin: 0"> <el-button size="mini" @click="closePopover">取消</el-button> <el-button type="primary" size="mini" @click="handleQuit">确定</el-button> </div> <el-button slot="reference" style="margin-left: 20px">退出</el-button> </el-popover> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> <script> export default { methods: { handleQuit() { // 执行退出菜单的操作 }, closePopover() { // 关闭 Popover 组件 } } } </script> ``` 希望这个解决方案能够帮助到您。如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值