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中iframe的使用及说明

    vue中iframe的使用及说明

    这篇文章主要介绍了vue中iframe的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue中为什么在组件内部data是一个函数而不是一个对象

    vue中为什么在组件内部data是一个函数而不是一个对象

    这篇文章主要介绍了vue中为什么在组件内部data是一个函数而不是一个对象,本文通过示例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vue中的methods、computed计算属性和watch监听属性的使用和区别解析

    Vue中的methods、computed计算属性和watch监听属性的使用和区别解析

    这篇文章主要介绍了Vue中的methods、computed计算属性和watch监听属性的使用和区别,本文通过示例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • Vue过滤器(filter)实现及应用场景详解

    Vue过滤器(filter)实现及应用场景详解

    在Vue中使用过滤器(Filters)来渲染数据是一种很有趣的方式,下面这篇文章主要给大家介绍了关于Vue过滤器(filter)实现及应用场景的相关资料,需要的朋友可以参考下
    2021-06-06
  • vue/Element UI实现Element UI el-dialog自由拖动功能实现

    vue/Element UI实现Element UI el-dialog自由拖动功能实现

    最近工作上需要在el-dialog基础上进行些功能的改动,下面这篇文章主要给大家介绍了关于vue/Element UI实现Element UI el-dialog自由拖动功能实现的相关资料,需要的朋友可以参考下
    2023-06-06
  • vue如何解决数据加载时,插值表达式闪烁问题

    vue如何解决数据加载时,插值表达式闪烁问题

    这篇文章主要介绍了vue如何解决数据加载时,插值表达式闪烁问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • vue(2.x,3.0)配置跨域代理

    vue(2.x,3.0)配置跨域代理

    这篇文章主要介绍了vue(2.x,3.0)配置跨域代理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 详解Vue3子组件向父组件传递消息

    详解Vue3子组件向父组件传递消息

    这篇文章主要介绍了Vue3子组件向父组件传递消息,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • vue自定义封装指令以及实际使用

    vue自定义封装指令以及实际使用

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,下面这篇文章主要给大家介绍了关于vue自定义封装指令以及实际使用的相关资料,需要的朋友可以参考下
    2022-01-01
  • OpenDataV低代码平台新增组件流程详解

    OpenDataV低代码平台新增组件流程详解

    这篇文章主要为大家介绍了OpenDataV低代码平台新增组件流程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论