Element-ui Popconfirm气泡确认框的确认及取消事件不生效

原创 已于 2022-06-08 10:04:34 修改 · 2.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui

于 2022-04-11 14:39:21 首次发布
在使用Element UI组件时，遇到一个问题：尝试通过@confirm绑定确认事件，但发现点击确认按钮并未触发预期的confirm事件。实际上，Element UI中应当使用onConfirm和onCancel事件来监听确认和取消操作。为了解决这个问题，可以检查当前使用的Element UI版本，确保其为最新版，或者直接切换到正确的事件绑定方式。

在这里插入图片描述
给组件绑定@confirm="confirm"时，发现点击确定按钮时，并不能触发confirm事件。
实际应该绑定的是onConfirm事件和onCancel事件
或者更新element的最新版本
在这里插入图片描述

【VUE】el-popconfirm失效，点击没有任何反应，刷新页面才能点击
weixin_41498246的博客
07-20 1435
el-popconfirm刷新才能点击问题临时解决办法
以element ui为例分析前端各种弹窗和对话框的使用场景与区别
程序员诚哥
01-18 7515
本文研究分析element ui 中的各种弹窗和对话框，包括了：Dialog 对话框，Drawer 抽屉，MessageBox 弹框，Popconfirm 气泡确认框，Message 消息提示，Notification 通知。同时说明了Dialog 对话框与Drawer 抽屉的区别、MessageBox和Dialog的区别以及Message消息提示与Notification通知的区别。
饿了么UI/element Popconfirm气泡确认框 confirm事件
你不追逐时代，时代就会反噬你，我是风尚，一个有趣的灵魂
06-08 4759
饿了么UI/element Popconfirm气泡确认框 confirm/cancel事件 很多人会发现，不知道怎么用，或者用不了，废话不多说：上代码：方法必须是 @onConfirm="successconfirm()" @onCancel="successcancel()"不这样就无法使用方法：...
vue2同时使用ant-design-vue和element-ui导致this.$confirm({})方法不生效解决方法
m0_65360496的博客
11-02 2000
【代码】vue2同时使用ant-design-vue和element-ui导致this.$confirm({})方法不生效解决方法。
修改elementUI的el-popconfirm 气泡确认框样式不起效果
夏天的博客
06-16 3631
在控制台上能够修改宽高度，把该元素拿来放在源文件中不能起效果；修改前： 修改后： 1.元素没有取对（其实一般改这种官方组件，不是写一长串的类名，以及深度处理器；相反它反而很简单，外面写一个组件定义的类名，里面写这个组件封装的类名就好了） 2.可以用不加scoped的全局样式 3.看elementUI官方文档，里面有一个poper-class属性总结：我没改对样式，是从源头上就错了，并且方法上也有问题；比如我之前取的是这个玩意，并且在编写源码的时候，我有将p写成.p，并且就是我有将同级的类在源码中用空格将它隔
记一次 Element-UI 嵌套组件不生效的问题
qq_39249627的博客
06-09 1681
这种问题表现出来就非常的玄学：当我更改代码后编译运行打开这个页面时，一切都很正常，点击 button 也能够正常显示气泡确认框。但运行一段时间后，再去点击 button，则很有可能无法显示气泡确认框了...
Element-UI自学实践（二）
weixin_40017062的博客
08-24 1374
Element-UI自学实践
定制化图标——Element UI 组件图标替换指南
Blog of Leviash
09-14 5866
本篇博客将介绍如何在使用 Element UI 组件时对原生图标进行定制化替换，提供了适用于满足个性化需求的方法和技巧。
Element Badge标记的使用方法
10-15
Element UI 是一个流行的前端用户界面库，它提供了一套美观且响应式的组件，用于构建现代化的Web应用。在Element UI中，Badge（标记）是一个小巧但实用的组件，常用于显示通知数量、状态提示等。本文将深入探讨...
elementUI中$confim/MessageBox修改confirmButtonClass不生效问题记录
11-16 3159
因为默认的消息弹窗里面，刚点开的时候，那个确定按钮颜色有点浅，好像是处于hover状态，当鼠标点击了标题或者别的地方就好了，但是这样就会出现一定的视觉差，所以想要把它设置一下初始状态颜色：confirmButtonClass: 'btn-class',一般情况下我们在项目中的style会使用scoped，进行一个作用域的限制。所以，这个时候btn-class。给comfim设置class是不会生效的。因为跨作用域了哦~。正常的颜色应该是这样的：更深一点。
【VUE异常】el-popconfirm失效，@confirm事件不生效，点击没有任何反应，刷新页面才能点击
No8g攻城狮的博客
09-15 6476
项目中遇到一个奇怪的问题，我使用了 el-popconfirm 组件，项目基于VUE，el-popconfirm 包裹住的按钮，操作列有好几个按钮选项，点击其中任何一处按钮之后，再次打开另外的一个 el-popconfirm 包裹住的按钮点击没有任何的反应，刷新浏览器之后才能点击触发相应的事件。因为我在按钮中使用了 v-if 来进行显示控制，当我在 el-popconfirm 组件上直接使用 v-if=“” 的时候，就会出现这个问题，问题出现在 v-if 与 el-popconfirm 结合。
关于elementUI中气泡确认框确认不起作用的问题
hhh233dd的博客
03-04 1187
出现elementUI中气泡确认框确认不起作用的问题，解决方法 问题：点击气泡确认框的确认键，不起作用 原因：使用官方的@Confirm，没有效果。 解决方法， 修改为@onConfirm
elementUI中的Popconfirm弹出框自定义调整（按钮位置，颜色调整）
m0_54853420的博客
03-03 5150
elementUI中的Popconfirm弹出框自定义调整 1.需求 2.更改组件 3.用法 只需要加入这段css样式，注意不能使用scoped <style lang="scss"> .el-popconfirm__main { margin: 23px 24px 17px 24px; font-size: 14px; font-family: MicrosoftYaHei; color: #333333; } .el-popconfirm__action { marg
confirm()点击取消无效
hua_wuse的博客
08-23 1989
关于confirm()点击取消无效 原因： confirm()的有两个返回 点击确认：是返回true 点击取消：是返回false 如果confirm()后面不跟return false;，就算点击取消也是执行确认按钮 代码如下： <script type="text/javascript"> $(function (){ //给【删除】绑定单击事件 $("a.deleteItem").click(function (){ return confirm("你确定要删除【
实现 element-ui popconfirm
热门推荐
小冷_Blog
08-22 1万+
实现原因 在中后台的业务开发中，Popconfirm(确认操作弹出框)是一个常见的需求，但 element-ui 仅提供 popover，不支持如 ant design 的 popconfirm，直接使用 popover 做确认框代码复杂的同时还带来一些意料之外的问题，因此选择封装一个简单易用但又支持灵活配置的 Popconfirm组件供业务使用，提高开发效率。 解决的问题 使用麻烦，需要写较多...
＜a＞标签中的confirm方法点击取消无效的问题
罗格的博客
07-17 1466
原本的写法 <a href="${ctx}/rgsd/common" onclick="return confirm('该操作会将总单下所有数据 ( 包含审核通过 ) 全部退单,确认执行? ')" class=" bbutton2 fl">总单全部退单</a> 用下面写法可以使取消按钮不请求到后台： <a href="javascript:void(0);" onclick = "return (confirm('该操作会将总单下所有数据 ( 包含审核通过 ) 全
解决element plus中el-table中使用Popconfirm或Popover无法显示按钮或无法弹出确认框的问题
羊书change的博客
09-25 4127
分析原因 使用的语法不同于之前的版本，我们需要到官网查看最新的写法： 表格组件的写法 气泡确认框 组件写法 简而言之： 标签中引用插槽采用#插槽名 的方式 结合二者，我们写出在表格中的气泡确认框： <template> <el-table :data=" tableData.filter( (data) => !search || data.name.toLowerCase().includes(search.toLower
JavaScript中的confirm方法点击取消无效(和点击确认效果相同)
酹江月的博客
08-12 3837
最近在做的一个内容管理（CMS）系统中涉及到了内容的删除，点击删除项目后，由JavaScript的confirm()方法确认是否删除。然而点击”取消“之后，内容仍被删除。由于对JavaScript不是很了解，于是Google了一下，找到了问题所在。 点击”取消“后，内容依然会被删除 原来的前端是这样写的： <td><a href="/jeeadmin/jeecms/...
el-popconfirm如何限制弹框宽度
最新发布
06-06
在Element UI中，`el-popconfirm`组件是一个气泡确认框，默认宽度由内容自适应（通常约为300px）。您可以通过CSS样式覆盖或`popper-class`属性来限制其宽度。以下是详细的设置方法，步骤清晰且可靠，基于Element UI...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值