Vue给 elementUI 中的 this.$confirm、this.$alert、 this.$prompt添加按钮加载效果
更新时间：2023年07月21日 11:58:40 作者：一颗不甘坠落的流星
这篇文章主要介绍了Vue给 elementUI 中的 this.$confirm、this.$alert、 this.$prompt添加按钮的加载效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
- 主要使用 beforeClose 方法实现 loading 的效果
- beforeClose MessageBox 关闭前的回调，会暂停实例的关闭
function(action, instance, done) 1. action 的值为'confirm', 'cancel'或'close'。 2. instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法。 3. done 用于关闭 MessageBox 实例。
- 具体实现：（
this.$confirm、this.$alert、 this.$prompt实现方法一样）
this.$prompt('名称', '新建表单', {
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: async (action, ctx, close) => {
// 如果非确认按钮事件，则直接关闭弹窗
if (action !== 'confirm') {
close();
return;
}
// confirmButtonLoading 是在 elementUI-message-box下的 main.vue 文件中封装的参数
ctx.confirmButtonLoading = true;
try {
// ctx.inputValue 获取 input 输入框的值
await this.createApi(ctx.inputValue);
// 提交成功后关闭窗口
close();
} catch (error) {}
ctx.confirmButtonLoading = false;
},
});实现前：
实现后：
到此这篇关于Vue给 elementUI 中的 this.$confirm、this.$alert、 this.$prompt添加按钮的加载效果的文章就介绍到这了,更多相关vue按钮的加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在 Vue.js 3 中实现网页的国际化多语言,最常用的包是 vue-i18n,通常我们会与 vue-i18n-routing 一起使用,这篇文章主要介绍了Vue3 如何接入 i18n 实现国际化多语言,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了基于Vue方法实现简单计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
关于vue-router路由的传参方式params query
这篇文章主要介绍了关于vue-router路由的传参方式params query,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue路由组件的缓存keep-alive和include属性的具体使用
：浏览器页面在进行切换时,原有的路由组件会被销毁,通过缓存可以保存被切换的路由组件,本文主要介绍了Vue路由组件的缓存keep-alive和include属性的具体使用,感兴趣的可以了解一下2023-11-11
今天小编就为大家分享一篇解决axios发送post请求返回400状态码的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
在Vue3中箭头函数被广泛支持,尤其是在组合式API的上下文中,这篇文章主要给大家介绍了关于Vue3学习之语法糖、箭头函数、函数声明的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
vue beforeDestroy clearInterval清除定时器失效的解决
这篇文章主要介绍了vue beforeDestroy clearInterval清除定时器失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue3+vite使用svg图片方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2026-03-03
这篇文章主要为大家详细介绍了vue中vxe-table表格加载数据的两种方式详解,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2026-01-01
vue3 element plus table selection展示数据,默认选中功能方式
这篇文章主要介绍了vue3 element plus table selection展示数据,默认选中功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
最新评论