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为点击‘’取消‘’触发的事件

总结

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

相关文章

  • vuex数据持久化的两种实现方案

    vuex数据持久化的两种实现方案

    在vuex的时候刷新以后里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的,所以一刷新页面就会把state中的数据重置,这就涉及到vue数据持久化的问题,这篇文章主要给大家介绍了关于vuex数据持久化的两种实现方案,需要的朋友可以参考下
    2021-07-07
  • vue实现div拖拽互换位置

    vue实现div拖拽互换位置

    这篇文章主要为大家详细介绍了vue实现div拖拽互换位置的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Vue 组件封装 并使用 NPM 发布的教程

    Vue 组件封装 并使用 NPM 发布的教程

    这篇文章主要介绍了Vue 组件封装 并使用 NPM 发布的教程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue实现直连mysql的方法步骤

    vue实现直连mysql的方法步骤

    Vue.js通常运行在浏览器环境,而浏览器不允许直接与MySQL数据库进行连接,本文主要介绍了vue实现直连mysql的方法步骤,感兴趣的可以了解一下
    2024-11-11
  • vue.js中npm安装教程图解

    vue.js中npm安装教程图解

    这篇文章主要介绍了vue.js中npm安装教程图解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • vue单页缓存方案分析及实现

    vue单页缓存方案分析及实现

    这篇文章主要介绍了vue单页缓存方案分析及实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 如何使用vue实现跨域访问第三方http请求

    如何使用vue实现跨域访问第三方http请求

    这篇文章主要介绍了如何使用vue实现跨域访问第三方http请求,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制

    Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制

    这篇文章主要介绍了Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制的相关知识,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue在响应头response中获取自定义headers操作

    vue在响应头response中获取自定义headers操作

    这篇文章主要介绍了vue在响应头response中获取自定义headers操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vuex unknown action type报错问题及解决

    Vuex unknown action type报错问题及解决

    这篇文章主要介绍了Vuex unknown action type报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02

最新评论