Ant Design Vue全局对话确认框(confirm)的回调不触发

 更新时间:2023年07月28日 15:54:35   作者:贪吃蛇2120  
这篇文章主要介绍了Ant Design Vue全局对话确认框(confirm)的回调不触发问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Ant Design Vue全局对话确认框的回调不触发

我们先来看下官网给的案例和代码。

<template>
  <a-button @click="showConfirm">
    Confirm
  </a-button>
</template>
<script>
export default {
  methods: {
    showConfirm() {
      this.$confirm({
        title: 'Do you want to delete these items?',
        content: 'When clicked the OK button, this dialog will be closed after 1 second',
        onOk() {
          return new Promise((resolve, reject) => {
            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
          }).catch(() => console.log('Oops errors!'));
        },
        onCancel() {},
      });
    },
  },
};
</script>

官网给了两个回调一个是onOk 点击确认的回调,还有一个是onCancel 是点击取消的回调。

但是我们使用了 就会发现里面的一些使用到this指向不对。导致里面需要用到this的功能都失效。

解决办法

只需要把这两个回调(onOk、onCancel)改成箭头函数即可。

代码如下:

 // 删除
        deleteItem (row) {
          this.$confirm({
            title: '提示',
            content: '您是否确认删除该组织?',
            // 点击确认触发的回调
            onOk: () => {
            //  这里模拟请求删除的接口
            setTimeout(() => this.$message.success('删除成功!'), 1000)
            },
            // 点取消触发的回调
            onCancel: () => {
              this.$message.success('你已经取消此操作!')
            }
          })
        },

ant design confirm确认框的应用

用法如下:

this.$confirm({
            // iconClass: 'el-icon-question', //自定义图标样式
            title: '提示',
            content: '账户名称与企业名称不一致,请确认是否提交?',
            confirmButtonText: '确认', //确认按钮文字更换
            cancelButtonText: '取消', //取消按钮文字更换
            showClose: true, //是否显示右上角关闭按钮
            type: 'warning', //提示类型  success/info/warning/error
            onOk:() => {
            this.doSave(_this.mdl)
            .then((res) => {
              if (res.success) {
                _this.$message.success('保存成功')
                _this.$emit('ok')
              } else {
                _this.$message.error(res.message)
              }
            })
            .catch((err) => {
              console.error(err)
            })
            .finally(() => {
              _this.confirmLoading = false
              _this.close()
            })     
            onCancel() {
                },
            }
          })

需要注意的是onOk中调用vue的方法doSave,此时需要用箭头函数写法,不然this指向出现问题,调不到doSave。

  • onOk为点击‘’确认‘’触发的事件
  • onCancel为点击‘’取消‘’触发的事件

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue路由守卫,限制前端页面访问权限的例子

    vue路由守卫,限制前端页面访问权限的例子

    今天小编就为大家分享一篇vue路由守卫,限制前端页面访问权限的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue3 使用setup语法糖实现分类管理功能

    vue3 使用setup语法糖实现分类管理功能

    这篇文章主要介绍了vue3 使用setup语法糖实现分类管理,本次模块使用 vue3+element-plus 实现一个新闻站的后台分类管理模块,其中新增、编辑采用对话框方式公用一个表单,需要的朋友可以参考下
    2022-08-08
  • vue-plugin-hiprint 详细使用

    vue-plugin-hiprint 详细使用

    这篇文章主要介绍了vue-plugin-hiprint 详细使用说明,使用Vue.Draggable库构建可拖拽元素的示例,你可以根据具体需求和技术选型选择适合的库或方法来实现可拖拽元素的功能,需要的朋友可以参考下
    2023-08-08
  • Vue.JS入门教程之列表渲染

    Vue.JS入门教程之列表渲染

    这篇文章主要为大家详细介绍了Vue.JS入门教程之列表渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue-loader中引入模板预处理器的实现

    vue-loader中引入模板预处理器的实现

    这篇文章主要介绍了vue-loader中引入模板预处理器的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Vue中router-view和component :is的区别解析

    Vue中router-view和component :is的区别解析

    这篇文章主要介绍了Vue中router-view和component :is的区别解析,router-view用法直接填写跳转路由,路由组件会渲染<router-view></router-view>标签,本文给大家介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • vue纯前端实现将页面导出为pdf和word文件

    vue纯前端实现将页面导出为pdf和word文件

    这篇文章主要为大家详细介绍了vue如何通过纯前端实现将页面导出为pdf和word文件,文中的示例代码讲解详细,有需要的小伙伴可以参考一下
    2024-01-01
  • vue-quill-editor富文本编辑器上传视频功能详解

    vue-quill-editor富文本编辑器上传视频功能详解

    需求需要实现富文本的功能,同时富文本中还可以上传视频和图片,选来选去最后决定了用这个富文本编辑器,下面这篇文章主要给大家介绍了关于vue-quill-editor富文本编辑器上传视频功能的相关资料,需要的朋友可以参考下
    2023-05-05
  • Vue+Express实现登录注销功能的实例代码

    Vue+Express实现登录注销功能的实例代码

    这篇文章主要介绍了Vue+Express实现登录,注销功能,本文通过实例代码讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 详解vue之自行实现派发与广播(dispatch与broadcast)

    详解vue之自行实现派发与广播(dispatch与broadcast)

    这篇文章主要介绍了详解vue之自行实现派发与广播(dispatch与broadcast),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01

最新评论