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过滤器filters获取不到this对象的问题

    解决vue过滤器filters获取不到this对象的问题

    这篇文章主要介绍了解决vue过滤器filters获取不到this对象的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • Vue3中插槽(slot)的全部使用方法

    Vue3中插槽(slot)的全部使用方法

    这篇文章主要介绍了Vue3中插槽(slot)的全部使用方法,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • Vue 中使用 typescript的方法详解

    Vue 中使用 typescript的方法详解

    Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势。也说明ts越来越️受大家的关注了。这篇文章主要介绍了Vue 中使用 typescript的方法详解,需要的朋友可以参考下
    2020-02-02
  • vue+Element中table表格实现可编辑(select下拉框)

    vue+Element中table表格实现可编辑(select下拉框)

    这篇文章主要介绍了vue+Element中table表格实现可编辑,实现select下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Vue插件之滑动验证码

    Vue插件之滑动验证码

    这篇文章主要为大家详细绍介绍了Vue插件之滑动验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue中使用jeecg进行前后端联调方式

    vue中使用jeecg进行前后端联调方式

    这篇文章主要介绍了vue中使用jeecg进行前后端联调方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue数字类型过滤器的示例代码

    vue数字类型过滤器的示例代码

    本篇文章主要介绍了vue数字类型过滤器的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue实现tagsview多页签导航功能的示例代码

    vue实现tagsview多页签导航功能的示例代码

    这篇文章主要介绍了vue实现tagsview多页签导航功能,本文梳理了一下vue-element-admin项目实现多页签功能的整体步骤,需要的朋友可以参考下
    2022-08-08
  • vant IndexBar实现的城市列表的示例代码

    vant IndexBar实现的城市列表的示例代码

    这篇文章主要介绍了vant IndexBar实现的城市列表的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • VUE3基础学习之click事件详解

    VUE3基础学习之click事件详解

    由于vue是一个双向数据绑定的框架,它的点击事件与以前常用的还是有很大的差别的,下面这篇文章主要给大家介绍了关于VUE3基础学习之click事件的相关资料,需要的朋友可以参考下
    2022-01-01

最新评论