ant design confirm确认框的应用

大佩梨

已于 2023-12-05 14:39:43 修改

阅读量4.4k

点赞数

分类专栏： ant design组件库使用文章标签： js vue.js 前端

于 2021-11-29 15:20:46 首次发布

本文链接：https://blog.csdn.net/weixin_44161385/article/details/121610841

版权

ant design组件库使用专栏收录该内容

7 篇文章 2 订阅

订阅专栏

本文介绍了如何在Vue中使用$confirm方法来创建自定义提示框，包括设置图标、标题、内容、按钮文字和类型。重点强调了在onOk回调中使用箭头函数以保持正确的this上下文，确保能够调用doSave方法。同时，提到了onOk和onCancel事件的用途。

摘要由CSDN通过智能技术生成

用法如下：


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

感谢阅读，有帮助的话点点赞点点关注谢谢哈。