当前位置: 首页 > news >正文

ant design vue3中引入message消息提示,全局引入亲测有效

两种方式

第一种:使用provide和inject方式

第二种:使用全局挂载$message方式

第一种:

//main.ts
import { createApp } from 'vue';
import App from './App';
import  Antd,{ message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';const app = createApp(App);
app.use(Antd);
// 在定义app的原型上用provide进行挂载
app.provide('message', message);
// xxx.vue
import {  inject } from 'vue';
const msg: any = inject('message');
const cancel = () => {msg.info('已取消');
};

第二种:

//main.ts
import { createApp } from 'vue';
import App from './App';
import  Antd,{ message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';const app = createApp(App);
app.use(Antd);
app.config.globalProperties.$message = message;
import {  getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const cancel = () => {proxy.$message.info('已取消');
};

关于message消息提示全局配置,vue3中第二种方式可能后续就会失效,建议使用官方推荐的第一种方式注入,provide和inject搭配简直无敌,使用vite+ts+vue3项目,unplugin-vue-components插件无法处理非组件模块,如 message、Modal、notification、Icon等,这种组件需要手动加载,都可以使用这种方式解决,祝大家好运,共勉!

相关文章:

ant design vue3中引入message消息提示,全局引入亲测有效

两种方式 第一种:使用provide和inject方式 第二种:使用全局挂载$message方式 第一种: //main.ts import { createApp } from vue; import App from ./App; import Antd,{ message } from ant-design-vue; import ant-design-vue/es/mess…...

UE5 Landscape 制作GIS卫星图地形

1. 总体想法: 制作GIS地形,使用Landscaping MapBox是一个好方法,但是区域过大,会占用很多内存 https://blog.csdn.net/qq_17523181/article/details/135029614 如果采用QGis,导出卫星图,在UE5里拼合出地形…...

opencv入门到精通——改变颜色空间

目录 目标 改变颜色空间 对象追踪 如何找到要追踪的HSV值? 目标 在本教程中,你将学习如何将图像从一个色彩空间转换到另一个,像BGR↔灰色,BGR↔HSV等 除此之外,我们还将创建一个应用程序,以提取视频中的…...

法线贴图实现地形模型皱褶、凹凸不平的纹理效果

在线工具推荐: 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 法线贴图在3D建模中扮演着重要的角色,它通过模拟表面的微…...

【SpringBoot篇】基于Redis实现生成全局唯一ID的方法

文章目录 🍔生成全局唯一ID🌹为什么要生成全局唯一id🌺生成全局id的方法✨代码实现 🍔生成全局唯一ID 是一种在分布式系统下用来生成全局唯一id的工具 在项目中生成全局唯一ID有很多好处,其中包括: 数据…...

轻度听力损失的儿童需要早期干预吗?

一些宝宝在做听力筛查时总是不通过,进一步听力诊断发现宝宝有轻度的听力损失,刚知道这个消息时,家长可担心了,总想着宝宝是不是听不到啊?但是一段时间后,有些家长又会忽略宝宝的听力问题,因为部…...

【Spring Security】认证密码加密Token令牌CSRF的使用详解

🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《Spring Security》。🎯🎯 …...

python一点通: 一文讲清Post 和 Put操作区别!

当我们使用网络服务时,如果我们不能小心地区分 POST 和 PUT,有时可能会触发错误。 在 Web 开发世界中,特别是在处理 RESTful API 时,HTTP 方法 POST 和 PUT 经常被使用,但常常被误解。这两者都用于向服务器发送数据&a…...

通过 Higress Wasm 插件 3 倍性能实现 Spring-cloud-gateway 功能

作者:韦鑫,Higress Committer,来自南京航空航天大学分布式系统实验室 导读:本文将和大家一同回顾 Spring Cloud Gateway 是如何满足 HTTP 请求/响应转换需求场景的,并为大家介绍在这种场景下使用 Higress 云原生网关的…...

0.618算法和基于Armijo准则的线搜索回退法

0.618代码如下: import math # 定义函数h(t) t^3 - 2t 1 def h(t): return t**3 - 2*t 1 # 0.618算法 def golden_section_search(a, b, epsilon): ratio 0.618 while (b - a) > epsilon: x1 b - ratio * (b - a) x2 a ratio * (b - a) h_…...

DPDK单步跟踪(3)-项目配置和单步跟踪

项目配置 下面都是示例的情况,请大家根据自己的工程来修改 ## 首先是配置CMake build setting Debug setting 这里最重要的是: –proc-type secondary 表示这是以secondary模式启动的dpdk客户端。 ## path mapping 然后根据自己的需要,配置…...

.NET core 自定义过滤器 Filter 实现webapi RestFul 统一接口数据返回格式

之前写过使用自定义返回类的方式来统一接口数据返回格式,.Net Core webapi RestFul 统一接口数据返回格式-CSDN博客 但是这存在一个问题,不是所有接口会按照定义的数据格式返回,除非每个接口都返回我们自定义的类,这种实现起来不…...

vue3 使用addRoute动态添加路由,页面刷新就白屏解决办法

问题,通过接口动态添加路由,第一次从登录页跳转还是正常的,说明路由添加成功了,但是刷新后就白屏了,且控制台报错路由匹配不到,在项目的main.js,router和路由拦截器中添加了一大堆打印后发现&am…...

探索鸿蒙:了解华为鸿蒙操作系统的基础课程

目录 学习目标: 学习内容: 学习时间: 学习产出: 介绍鸿蒙操作系统的起源和发展历程。 理解鸿蒙操作系统的核心概念和体系结构。 学习如何搭建和配置鸿蒙开发环境。 掌握基础的鸿蒙应用开发技术,包括应用的创建、…...

【Linux】进程周边007之进程控制

👀樊梓慕:个人主页 🎥个人专栏:《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》 🌝每一个不曾起舞的日子,都是对生命的辜负 目录 前言 1.进程创建 2.进程终止 2.…...

【C++】vector容器的模拟实现

目录 一,框架设计 二,构造函数 三,析构函数 四,赋值运算符 五,容器接口的实现 1,迭代器实现 2,“ [] ”运算符的实现 3,swap交换和resize重设大小 4,insert插入…...

华为Harmony——ArkTs语言

文章目录 一、简单示例二、声明式UI描述创建组件无参有参数 配置属性配置事件配置子组件 三、自定义组件基本用法基本结构成员函数/变量 一、简单示例 我们以一个具体的示例来说明ArkTS的基本组成。如下图所示,当开发者点击按钮时,文本内容从“Hello Wo…...

uniapp使用colorUI

colorUI 微动画 | ColorUI 使用文档 1&#xff1a;把colorui里三个文件复制到自己项目中去 App.vue </script> <style> import url(colorui/icon.css); import url(colorui/main.css); import url("colorui/animation.css");-webkit-keyframes show {…...

浅谈测试自动化selenium之POM模式

基于本人也是一个初学者&#xff0c;在运用POM模式的时候记录一下自己的学习笔记。 如果你是大神&#xff0c;那么可以略过&#xff0c;如果你是初学者&#xff0c;希望对你有帮助。 本文阐述了以下几个问题&#xff1a; 什么叫POM模式 为什么要用POM模式 POM模式的思想 POM模…...

什么是事件传播、事件冒泡、事件捕获?

一、事件传播 1、概述 &#xff08;1&#xff09;当事件发生在DOM元素上时&#xff0c;该事件并不完全发生在那个元素 &#xff08;2&#xff09;在冒泡阶段中&#xff0c;事件冒泡或向上传播至父级、祖父级、祖父的父级&#xff0c;直到 window 为止 &#xff08;3&#x…...

【uniapp】uniapp中本地存储sqlite数据库保姆级使用教程(附完整代码和注释)

数据库请求接口封装 uniapp中提供了plus.sqlite接口&#xff0c;在这里我们对常用的数据库请求操作进行了二次封装 这里的dbName、dbPath、recordsTable 可以根据你的需求自己命名 module.exports {/** * type {String} 数据库名称*/dbName: salary,/*** 数据库地址* type {…...

微软推出了GPT-RAG:这是一个机器学习库,为在Azure OpenAI上使用RAG模式生产部署大型语言模型(LLMs)提供了企业级参考架构

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

Centos系统升级gcc版本

自己环境的gcc版本太低&#xff0c;影响使用SAN全家桶进行内存泄露检查 当前环境gcc版本查看 gcc --version 进行升级&#xff1a; 1、安装EPEL存储库 yum install epel-release -y 2、确保系统已经更新到最新版本 yum update -y 3、安装GCC编译器及其相关工具包 yum g…...

Http---HTTP响应报文

1. HTTP响应报文分析 HTTP 响应报文效果图: 响应报文说明: --- 响应行/状态行 --- HTTP/1.1 200 OK # HTTP协议版本 状态码 状态描述 --- 响应头 --- Server: Tengine # 服务器名称 Content-Type: text/html; charsetUTF-8 # 内容类型 Transfer-Encoding: chunked # 发送给客…...

iOS 开发设计 App 上架符合要求的截图

1. 真机运行截屏 2. 可以在 Apple developer 官网 Design 下找到 iPhone 边框 https://developer.apple.com/design/resources/ 不用这个边框也行&#xff0c;可以参考已上架 App 的图片框 3. 使用 Procreate&#xff08;PhotoShop&#xff09;创建符合要求的画布大小 4. 导入…...

DRF之引入

目录 一、web应用模式 【1】前后端混合开发 【2】前后端分离 二、API接口 三、接口测试工具&#xff1a;Postman 四、RESTful API规范 【1】什么是RESTful 【2】RESTful API的规范 2.1 数据的安全保障 2.2 接口特征表现 2.3 多数据版本共存 2.4 数据即是资源&#…...

【Skynet 入门实战练习】事件模块 | 批处理模块 | GM 指令 | 模糊搜索

文章目录 前言事件模块批处理模块GM 指令模块模糊搜索最后 前言 本节完善了项目&#xff0c;实现了事件、批处理、模糊搜索模块、GM 指令模块。 事件模块 什么是事件模块&#xff1f;事件模块是用来在各系统之间传递事件消息的。 为什么需要事件模块&#xff1f;主要目的是…...

Web组态可视化编辑器-by组态

演示地址&#xff1a; http://www.by-lot.com http://www.byzt.net web组态可视化编辑器&#xff1a;引领未来可视化编辑的新潮流 随着网络的普及和快速发展&#xff0c;web组态可视化编辑器应运而生&#xff0c;为人们在网络世界中创建和编辑内容提供了更加便捷的操作方式。这…...

PDF.js介绍以及使用

一、PDF.js是什么 PDF.js是一个JavaScript库&#xff0c;可以在现代Web浏览器中渲染和显示PDF文件。它的主要作用是将PDF文件转换为HTML5格式&#xff0c;以便在浏览器上进行展示和交互。 PDF.js的主要功能包括&#xff1a; 在浏览器中显示PDF&#xff1a;PDF.js使用HTML5的…...

经常使用的排序算法

一、直接插入排序 #include <stdio.h>void insert_sort(int arr[], int n){int i, j, tmp;for (i 1; i < n; i){tmp arr[i];j i - 1;while (j > 0 && arr[j] > tmp){ // 将要插入的元素与数组中的元素比较&#xff08;从后向前比&#xff09;arr[j …...

o2o电子商务网站建设/海口关键词优化报价

点击蓝字关注我们吧&#xff01;Python的起源Python的作者&#xff0c;Guido von Rossum&#xff0c;荷兰人。1982年&#xff0c;Guido从阿姆斯特丹大学获得了数学和计算机硕士学位。然而&#xff0c;尽管他算得上是一位数学家&#xff0c;但他更加享受计算机带来的乐趣。用他的…...

济南微网站开发/百度一下首页网页手机版

jsp的常用指令有哪些(编译指令/动作指令整理) JSP动作指令 JSP - JSP中的脚本、指令、动作和注释...

做网站分销违法吗/沈阳优化推广哪家好

显卡驱动程序就是用来驱动显卡的程序&#xff0c;它是硬件所对应的软件。驱动程序即添加到操作系统中的一小块代码&#xff0c;其中包含有关硬件设备的信息。有了此信息&#xff0c;计算机就可以与设备进行通信。驱动程序是硬件厂商根据操作系统编写的配置文件&#xff0c;可以…...

哈尔滨建设网站的免费咨询/跨境电商网站开发

试验网站#1搜索引擎优化收录情况记录(断续运行)日期Yahoogooglebaidusogou每日收录每日收录增量每日收录每日收录增量每日收录每日收录增量每日收录每日收录增量2007-6-24288 333 1060 4813 2007-6-25164013523330108020481302007-6-26空间超过6月流量限制……&#xff0c;…...

上海市住房城乡建设委官方网站/什么软件能搜索关键词能快速找到

api&#xff1a; 构造函数摘要ModelAndView() bean样式用法的默认构造函数&#xff1a;填充bean属性&#xff0c;而不是传递构造函数参数。ModelAndView(Object view) 当没有模型数据暴露时&#xff0c;方便的构造函数。ModelAndView(Object view, Map mod…...

做网站挂靠服务器/百度推广平台首页

文章目录1. let1. 具有块级作用域2. 不存在变量提升3. 暂时性死区4. 经典面试题5. 小结2. const1. 具有块级作用域2. 声明常量时必须赋值3. 常量赋值后&#xff0c;值不能修改4. 小结5. let、const、var的区别3. 解构赋值1. 数组解构2. 对象解构3. 对象的连续解构赋值4. 小结4.…...