Ant Design of Vue （5）使用confirm 调用其他方法返回时，使用this.$notification作为返回信息提示时报属性示定义的错误解决方案

最新推荐文章于 2025-02-04 18:01:06 发布
最新推荐文章于 2025-02-04 18:01:06 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： Vue实战记录 文章标签： 其他 html5
未经作者授权，禁止转载
本文链接：https://blog.youkuaiyun.com/weixin_39237340/article/details/120362498
版权

一.使用confirm进行确认后

二.返回成功或失败信息的时候使用this.notification作为提示时报错

通知提醒框 Notification - Ant Design Vue (antdv.com)

 报错提示$notification没有定义：

 三.解决方法，在确认框中用到的当前作用域时，this需要提前替换为局部变量，否则浏览器会提示无法获取该属性。

五.效果

  点击确认后，

 弹出结果

 参考文章：(34条消息) 前端问题集（2）：Ant Design Vue 中使用 this.$confirm 时，this调用其他方法失败。_Yooao的博客-优快云博客

vue3 - 最新手机扫码PC网站二维码登录功能，用手机端扫描PC端vue3网页的登录二维码，然后在手机上点击“确认登录“完成登录，PC网页生成登录二维码，用户拿手机扫码，手机上点确定后电脑端做出响应
高级前端工程师
03-28 4639
vue3，uniapp，微信小程序，vue3+uniapp实现移动端+pc端互通扫码登录，微信扫码登录，手机扫电脑微信登录码登录功能，vue3手机微信扫码登录详细教程，如何实现微信扫码授权登录，手机小程序怎么和网页pc扫二维码登录互通监听手机端确认登录，vue3手机+网页扫码登录，pc微信网页授权，网站接入微信扫码登录功能详细教程，手机小程序扫网页二维码登录的原理，vue3接入微信扫码授权登录流程，vue使用手机app扫描二维码登录，微信扫码登录后获取信息数据，vue生成二维码实现手机APP扫码进行web网
vue 执行函数this_web前端：vue中this在回调函数中的使用
weixin_32024145的博客
12-24 2296
回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。vue中this在回调函数中的使用this在各类回调中使用:如果是普通函数是没法使用的所以需要先将this.变量赋值给新的变量,然后才能在回调函数中使用例如:refund:function(id){if(!this.url.refund){this...
8,element中Notification组件（this.$notify）自定义样式
木卯彳亍的博客
04-12 4388
修改前： 修改后： let html = '<div class="alertTile"></div>' + '<div class="alertTile_1">' + "报警" + '</div>' + "<div style='word-wrap:break-word;color:white'>" + "目前温度" + ":" + "100" + "摄氏度" + "<br/>" + "报警时间："+this.forma
element中Notification组件（this.$notify）自定义样式
askuld的博客
09-01 3259
/点击事件回调console.log("自动关闭，流程。。");console.log("手动确认，流程。。");},
element中Notification组件（this.$notify）自定义样式示例
gitblog_09784的博客
10-16 992
element中Notification组件（this.$notify）自定义样式示例 【下载地址】element中Notification组件this.notify自定义样式示例 此资源包含一张详细说明图片，清晰展示了从基础到进阶的自定义过程，包括但不限于：- 如何通过CSS覆盖默认样式。- 添加自定义背景图片或图标。...
前端问题集（2）：Ant Design Vue 中使用 this.$confirm 时，this调用其他方法失败。
Yooao的博客
06-26 5822
Ant Design Vue 中使用 this.$confirm 时，this调用其他方法失败，提示是该方法未定义。
【ElementUI组件刨析】Notification组件（全网最细踩坑日记）
io_123io_123的博客
10-06 9619
ElementUI库Notification 组件全面刨析，功能具体介绍，典型案例，全网最全
Vue项目集成Element,Mock,AntDesign,Axios
RenLJ1895的博客
01-07 682
​ 前置要求 Node 和 npm 官网自行安装 Vue-cli 安装npm install vue-cli -g 或者换淘宝NPM镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 和 cnpm install vue-cli -g //全局安装 vue-cli 创建项目 vue init webpack vue-demo npm和yarn都可以 ElementUI Element - 网站快速成型工具 安装 yarn a
Vue中$notify提示信息换行处理与Element-UI冲突解决方案
在Vue开发中，当需要在Element UI中的$notify组件中实现换行显示错误提示信息时，可能会遇到一些挑战。用户界面设计中常常要求根据后台返回的错误列表动态展示换行内容，以提高用户体验。通常，这涉及到对文本样式...
使用Anti Design Vue进行后台管理系统开发
Anti Design Vue是由蚂蚁金服团队开发的，它借鉴了谷歌的Material Design和蚂蚁金服的Ant Design设计理念，融合了现代化的设计元素和用户交互模式。 Anti Design Vue的特点包括但不限于： - 简洁直观的设计风格 - ...
Vue3.5 企业级管理系统实战（四）：组件及API自动导入配置
最新发布
weixin_40398599的博客
02-04 1069
本文介绍如何在Vue 3项目中通过unplugin-vue-components和unplugin-auto-import插件实现Element Plus按需导入，优化性能。涵盖配置步骤，注重服务型组件导入，提高开发效率，减小应用体积。
Element组件$Notification 通知使用指北
m0_60234005的博客
12-01 642
Element组件$Notification 通知使用指北
ant design vue中通知提醒框Notification的使用
i_am_a_div的博客
11-19 7305
效果：点击接口，出现提示弹框，数据获取到后在消失 <template> <a-button type="primary" @click="openNotification"> Open the notification box </a-button> </template> <script> const close = () => { console.log( 'Notification was closed.
032_Notification通知
aihiao的专栏
02-28 3707
1. Notification通知 1.1. Notification通知, 悬浮出现在页面角落, 显示全局的通知提醒消息。 1.2. Options 参数 说明 类型 可选值 默认值 title 标题 string 无 无 message 说明文字
Notification 通知，循环通知
m0_50664127的博客
09-06 1213
默认情况下，经过一段时间后 Notification 组件会自动关闭，Notification 组件提供通知功能。在最简单的情况下，你可以设置title。以上是单个按钮实现，实现多个展示效果。字段，用于设置通知的标题和正文。方法，接收一个options。但是通过设置duration。，可以控制关闭的时间间隔，Element 注册了。字段和message。特别的是，如果设置为。，单位为毫秒，默认为。
Vue提示框组件vue-notification使用实例演示
小蓝枣的博客
03-19 980
安装方法： 通过 npm install vue-notification 就能使用了。 导入方法： import Notifications from 'vue-notification'; Vue.use(Notifications); 并且需要在 App.vue 里加入 。 其中 duration 参数为持续时间。 position 参数为提示位置，前面的值为纵向的顶部 top 和底部 bottom
【Ant Design Vue】Notification/Message没有反应、$notification/$message undefined 已解决
weixin_44752429的博客
01-21 5209
先上官方文档：Ant Design Vue Notification（通知提醒框） 光把官方文档里的代码粘贴过来是无法直接使用的，这里的处理方式和使用Ant Design Vue的普通组件也不一样，需要在Vue的原型链中增加notification属性，这样在其他组件中才可以通过$notification使用。 在main.js中修改Vue原型链： import Vue from 'vue' import App from './App' //从Ant Design Vue导入notification，注
ant notification的使用
ast_5921的博客
11-25 1331
import { Button, notification } from 'antd'; queryDemanDetail_two = () => { const openNotificationWithIcon = type => { switch (type) { case 'success': notification[type](...
element-ui报错：Uncaught (in promise) cancel，在使用this.$confirm中报错
changyana的博客
10-13 654
这是因为this.$confirm的使用是要带.catch()函数的，如果删除了则会出现如上报错。点击了关闭按钮就会报错。
this.$Modal.confirm
08-24
this.$Modal.confirm是一个前端框架（可能是Vue或者ElementUI等）中的一个方法，用于在用户进行某个操作时弹出一个确认框，以便用户确认是否要执行该操作。根据引用和引用的代码片段来看，this.$Modal.confirm方法接受一个参数作为提示信息，并返回一个Promise对象。当用户点击确认按钮时，Promise对象会被resolve，可以执行相应的操作；当用户点击取消按钮时，Promise对象会被reject，可以执行相应的操作。这个方法通常用于需要用户确认的操作，例如删除操作、重要的设置操作等。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [this.$modal.confirm的使用方法](https://blog.csdn.net/m0_72167535/article/details/128051409)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [antd-vue 弹窗（modal）this.$confirm，不点击确定或取消按钮，关闭弹窗](https://blog.csdn.net/YQxyqX555/article/details/119330439)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小丫头呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值