element ui中ConfirmShow弹窗点击取消时去除按钮加载效果

最新推荐文章于 2024-08-22 11:52:08 发布
最新推荐文章于 2024-08-22 11:52:08 发布
阅读量2.1k 收藏
点赞数
分类专栏： vue前端 element ui  其他
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42172560/article/details/108337075
版权
其他 同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
vue前端
5 篇文章 0 订阅
订阅专栏
element ui 
1 篇文章 0 订阅
订阅专栏

当点击按钮时候 会有加载限定防止用户点击多次如图
在这里插入图片描述
在这里我们点击确定时候去执行我们的相应方法 我这里是作废功能 所以执行的是作废方法，当我们的方法执行成功时按钮加载会恢复，通俗的讲就是按钮上没有了加载的小圈圈
当我们点击取消时候如何也让按钮恢复正常，不再处于加载中呢代码如下图 我们只需要catch一下就可以 注意catch所放的位置别放错

在这里插入图片描述
点击取消后或者点击确定后效果
在这里插入图片描述

徐子骞
关注
专栏目录
vue+element-ui实现表格中的删除按钮加载动画
Mrbignose的博客
07-02 1968
vue+element-ui实现表格中的删除按钮加载动画 背景： 在同事的项目中有这样的一个要求： 就在在表格中的操作栏有一个删除按钮，点击的时候加载loading的动画，加载完毕后loading动画停止。 同事开始的时候是全局定义一个isLoading的变量来控制， 结果发现每点击一个删除按钮，就会导致所有的按钮加载loading动画。 真棒！bug又出现了，琢磨了代码一番，于是有了一下的方案！ 思路 导致bug的原因是因为共用这个全局的变量，既然全局不行，那么我们就可以从每一行来控制 1.放弃data
element-ui 固定弹窗底部的按钮
肖肖肖丽珠的博客
02-15 6784
想要的效果。内容超出出现滚动条。地步按钮固定不变 需要注意两点 1.el-dialog 上面写v-model 2.下面的按钮上加上slot="footer" <el-dialog title="收货地址" v-model="dialogFormVisible" :visible.sync="dialogFormVisible"> <el-form :model="form"> <el-form-item label="活动名称" :label-width=..
【Element-UI】vue使用 this.$confirm区分取消与关闭，vue给this.$confirm设置多个按钮
G佳伟
07-04 2088
在使用this.$confirm过程中经常会遇到将取消按钮修改成其他的按钮去执行，如果直接使用catch会出现右上角以及遮罩层关闭也会执行，所以需要做个区分如遇到两个按钮可以用取消按钮作为第二个按钮如果是出现多个按钮就不支持了。
elementui $confirm 确认弹框区分取消操作和关闭操作
最新发布
weixin_48896647的博客
08-22 548
例：弹出框需要取消 确认 关闭 三个单独操作流程。可参考 elementui。
【elementplus】给确认提示框的确认按钮增加加载状态的写法
bbt953的博客
08-19 931
给确认提示框的确认按钮增加加载状态
vue confirm弹窗去掉取消和右上角关闭按钮
bit的博客
07-07 5420
4.element-ui 文档出处 https://element.eleme.io/#/zh-CN/component/message-box。使用的是this.confirm弹窗, 去掉右上角的x和取消按钮, 也不能点击空白处关闭。this.confirm弹窗去除取消, 右上角x按钮。
element-ui中dialog弹窗关闭按钮失效的解决
10-14
在element-ui中，Dialog组件的使用是相对直观的，但有时在复杂的应用场景中，我们需要对Dialog组件进行更深入的定制。 首先，我们来理解一下Dialog组件的基础用法。Dialog组件是用于展示弹出式对话框的组件，它可以...
vue中使用element ui的弹窗与echarts之间的问题详解
10-16
在Vue.js应用中，结合Element UI和ECharts进行开发时，可能会遇到一些特定的问题，尤其是在使用Element UI的弹窗组件（如`el-drawer`）内嵌ECharts图表时。本文将深入探讨这个问题，并提供解决方案。 首先，问题的...
vue 实现element-ui中的加载中状态
01-18
需要添加加载状态，调用下面方法即可 //开启loading const load = _this.$loading({ lock: true, ...以上这篇vue 实现element-ui中的加载中状态就是小编分享给大家的全部内容了，希望能给大家一个参考
关闭弹框事件_关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法...
weixin_33622043的博客
02-05 3044
好久没见了在项目中遇到一个小小的需求，总结了一下！详细我就不介绍了，相信大家用过的话，很了解。详见文档----------->http://element-cn.eleme.io/#/zh-CN/component/message-box#messagebox-dan-kuang项目需求——关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗的解决...
关于element-vue Popconfirm 气泡确认框提交取消事件的更新
tscn1的博客
12-18 931
最新官网截图 原来提交事件是@onConfirm，现在是@confirm
element-ui中 this.$confirm修改确定取消按钮顺序和样式
weixin_41346436的博客
10-31 1782
【代码】element-ui中 this.$confirm修改确定取消按钮顺序和样式。
Element-ui中this.$confirm去掉确定或者取消按钮
Szs1208的博客
06-13 3635
在使用element-ui内的this.$confirm组件时进行确定或取消按钮的显隐
element中this.$confirm的用法，element-ui MessageBox 弹框怎么隐藏右上角的关闭按钮呢？element-ui MessageBox 弹框怎么设置点击空白处不关闭？
migexiaoliang的博客
04-19 1万+
项目场景： element-ui MessageBox 弹框怎么隐藏右上角的关闭按钮呢？ element-ui MessageBox 弹框怎么设置点击空白处不关闭？ 如何隐藏this.confirm右上角的x？this.confirm右上角的x？ this.confirm右上角的x？this.confirm怎么将右上角的x屏蔽掉？ 问题描述 有一些业务需要让弹窗一直显示，除非已经点击了确认按钮，这时候就需要对this.$confirm进行处理，既不可以点击右上角x将弹窗关闭，也不可以点击其它空白处关闭弹
jq实现底部弹框_WPF MVVM 弹框之等待框
weixin_39960145的博客
11-24 156
WPFMVVM弹框之等待框目录一、效果二、弹框主体改造三、等待动画用户控件四、弹窗 ViewModel 和帮助类的改造五、使用方法和代码地址独立观察员 2020年10月13日之前写过一篇《WPF MVVM 模式下的弹窗》，里面实现了确认框和消息框，经过一段时间的演化，目前又新增了可显示自定义内容的弹框、可进行信息录入的弹框、以及本文将要介绍的加载等待框。一、效果先来看看效果，首先是其...
记ElementUI内置的$confirm确认消息弹框方法
vvv3171071的博客
06-23 5901
$confirm，你也不想让ElementUI蒙羞吧？那就听话，让我使使！
vue element插件this.$confirm用法（取消也可以发请求）
热门推荐
qq_42970173的博客
10-16 6万+
场景：弹出框的两个按钮都能分别请求接口 最简单的弹出框就是“确定”“取消”，一般用户点击确定才会继续接下来的动作，点击取消则不做任何动作（即不会请求接口）。 如： <template> <el-button type="text" @click="open">点击打开 Message Box</el-button> </template> <script> export default { methods: { ope
vue 弹窗_Vue原理解析（十一）：搞懂extend和$mount原理并实现一个命令式Confirm弹窗组件...
weixin_39713335的博客
12-12 569
在学习老黄的Vue2.0开发企业级移动端音乐Web App课程时，里面有一个精美的确认弹窗组件，如下： 不过使用起来并不是很方便，如每个使用的地方需要引入该组件，需要注册，需要给组件加ref引用，需要调用事件来控制状态。其实这个组件相对来说是比较独立的，我们在使用组件库的时候，相信都有调用过命令式弹窗组件的经历，今天我们就来搞懂这种命令式组件的实现原理，以及将这个精美的弹窗组件改为命令式的，也就...
vue只用element ui怎么在一个表格中点击按钮弹出弹窗
05-31
你可以使用 Element UI 的 Dialog 对话框组件来实现在表格中点击按钮弹出弹窗的功能。具体实现步骤如下： 1. 在表格中添加一个操作列，该列包含一个按钮，用于触发弹窗。 2. 在按钮中绑定一个点击事件，该事件会调用一个方法。 3. 在该方法中，使用 Element UI 的 Dialog 组件来创建一个弹窗，并设置弹窗的内容。 4. 在弹窗中添加需要的表单元素或其他组件，并进行相关的操作。 下面是一个简单的代码示例，以帮助你更好地理解如何实现这个功能： ``` <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <<el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" @click="handleClick(scope.row)">编辑</el-button> </template> </el-table-column> </el-table> <el-dialog :visible.sync="dialogVisible"> <el-form> <el-form-item label="姓名"> <el-input v-model="editRow.name"></el-input> </el-form-item> <el-form-item label="年龄"> <el-input v-model="editRow.age"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="saveEdit">保存</el-button> </div> </el-dialog> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 } ], dialogVisible: false, editRow: {} } }, methods: { handleClick(row) { this.editRow = Object.assign({}, row) this.dialogVisible = true }, saveEdit() { // 在这里进行保存操作 this.dialogVisible = false } } } </script> ``` 在这个示例中，我们在表格中添加了一个“操作”列，该列包含一个“编辑”按钮。当用户点击该按钮时，会触发 `handleClick` 方法。该方法会将当前行的数据复制到 `editRow` 对象中，并将 `dialogVisible` 属性设置为 `true`，以显示一个弹窗。 弹窗中包含一个表单，用户可以在其中编辑数据。当用户点击“保存”按钮时，会触发 `saveEdit` 方法，该方法可以在这里进行保存操作。最后，我们将 `dialogVisible` 属性设置为 `false`，以关闭弹窗。 需要注意的是，在这个示例中，我们使用了 `Object.assign` 方法来创建一个新的对象，以确保我们不会直接修改原始数据。这是一个非常重要的步骤，因为直接修改原始数据可能会导致一些意外的结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值