【UI】将 naive ui 的 message 封装进axios 中,关于naiveui的message相关的用法
文章目录
- 前言
- 在setup外进行使用
- 直接包裹使用
- vue 单文件中使用

参考文章:
关于naiveui的message相关的用法
前言
最近新建了一个vite + vu3 的项目,完全是从0 到1 ,封装到request 的时候 想对axios 请求做一个全局的处理,但发现naive ui 的message 不像element ui 那样使用起来方便。多方查找资料文章终于将 message 封装进request 中,算是解决了这个问题。写这篇文章记录加深印象,防止下次再遇到。
在setup外进行使用
如果你想在 setup 外使用 useDialog、useMessage、useNotification、useLoadingBar,可以通过 createDiscreteApi 来构建对应的 API。
直接上代码,在请求的api中使用,代码如下:
//request.js
import { createDiscreteApi } from "naive-ui";
const { message } = createDiscreteApi(["message"]);
//if (response.data.code == 500) {// 错误弹窗提示message.error(response.data.msg);
}
直接包裹使用
我们使用官方的案例,看了半天,先贴官方解释
如果你想使用信息,你需要把调用其方法的组件放在
n-message-provider内部并且使用useMessage去获取API。
如果你想知道如何在setup外使用,请参考页面最下方的 Q & A。
官方例子:
<!-- App.vue -->
<n-message-provider><content />
</n-message-provider>
不少同学还是不知道咋用,往下看,复制粘贴就完事
App.vue
<template><n-config-provider><n-modal-provider><n-message-provider><router-view /><TheMessage></TheMessage></n-message-provider></n-modal-provider></n-config-provider>
</template><script setup>
import { NConfigProvider } from "naive-ui";
</script><style scoped></style>
vue 单文件中使用
至于在vue文件中使用,直接引入使用就好
import { useMessage } from 'naive-ui'
const message = useMessage()
message.warning('hello')
相关文章:
【UI】将 naive ui 的 message 封装进axios 中,关于naiveui的message相关的用法
文章目录 前言在setup外进行使用直接包裹使用vue 单文件中使用 参考文章: 关于naiveui的message相关的用法 前言 最近新建了一个vite vu3 的项目,完全是从0 到1 ,封装到request 的时候 想对axios 请求做一个全局的处理,但发现…...
IC卡批量加密快速写入
我们常用的非接触式IC卡,简称M1卡,他有16个扇区,每个扇区有A密码和B密码 对数据的读写是要验证密码的,因此卡片正式使用前,需要把卡片密码改成需要的密码,系统才可以识别 由于一次加密卡片数量比较大&#…...
软件测试学习笔记丨tcpdump 与 wireshark
本文转自测试人社区,原文链接:https://ceshiren.com/t/topic/32333 一、抓包分析TCP协议 1.1 简介 TCP协议是在传输层中,一种面向连接的、可靠的、基于字节流的传输层通信协议。 1.2 环境准备 对接口测试工具进行分类: 网络嗅…...
Redis:分布式 - 哨兵
Redis:分布式 - 哨兵 概念哨兵 Docker 搭建哨兵分布式选举流程 概念 Redis 的主从复制模式下,一旦主节点由于故障不能提供服务,需要人工进行主从切换,同时大量的客户端需要被通知切换到新的主节点上,对于上了一定规模…...
开源城市运动预约的工具类小程序源码
运动场馆预约小程序是一款主要针对城市运动预约的工具类程序, 产品主要服务人群为20-45岁运动爱好者, 程序前后端完整代码,包括场馆动态,运动常识,羽毛球场地预约,足球场地预约,篮球场地预约&a…...
SldWorks问题 2. 矩阵相关接口使用上的失误
问题 在计算三维点在图纸(DrawingDoc)中的位置时,就是算不对,明明就4、5行代码,怎么看都是很“哇塞”的,毫无问题的。 但结果就是不对。 那就调试一下吧,调试后发现生成的矩阵很不对劲&#…...
2024十月超全大模型常见面试题(附答案)
大模型相关的面试问题通常涉及模型的原理、应用、优化以及面试者对于该领域的理解和经验。以下是一些常见的大模型面试问题以及建议的回答方式: 请简述什么是大模型,以及它与传统模型的主要区别是什么? 回答:大模型通常指的是参…...
Java 的数据结构整理(整合版)
Java 的数据结构整理(整合版) 一、数据输入输出 https://www.runoob.com/java/java-scanner-class.html 这部分是为了预防 leetcode 刷习惯了,忘记怎么处理输入输出的问题 数据输入 Java的数据输入和 C 相比非常繁琐,因此大多…...
如何让信息学奥赛学习“边玩边学”?——趣味编程让枯燥学习变得有趣
信息学奥赛(NOI)作为一项高水平的编程竞赛,内容涉及到大量的算法、数据结构和复杂的逻辑思维,对学生的要求非常高。然而,面对枯燥的知识点和高难度的题目,很多学生在备赛过程中容易感到乏味甚至放弃。那么&…...
【艾思科蓝】C++游戏开发探秘:打造高性能游戏世界的钥匙
【IEEE出版 | 院士、Fellow报告】第八届电气、机械与计算机工程国际学术会议(ICEMCE 2024)_艾思科蓝_学术一站式服务平台 更多学术会议请看:学术会议-学术交流征稿-学术会议在线-艾思科蓝 引言 在当今的游戏开发领域,C以其高效、…...
企业如何做好数据安全防泄密?10个你不知道的防泄密措施
随着数字化转型的加速推进,企业在处理和存储大量数据时,数据泄密风险也显著增加。从客户资料到商业机密,敏感数据一旦泄露,可能对企业造成不可估量的损失。为了更好地应对这一挑战,企业需要采取全面的防泄密策略。以下…...
MySQL基本操作(1)
初始数据库 数据库的基本概念 数据库是一个按照数据结构来组织、存储和管理数据的仓库,换句话说,就是存储数据的仓库。 为何使用数据库?使用数据库不仅仅为了使数据持久化,还能使得数据能够进行有效的管理,以…...
Python 如何使用 Redis 作为缓存
Python 如何使用 Redis 作为缓存 一、引言 在现代 Web 应用程序和数据密集型服务中,性能 和 响应速度 是至关重要的因素。而当应用需要频繁访问相同的数据时,直接从数据库获取数据会耗费大量的时间和资源。因此,缓存系统成为了提升性能的重…...
Python知识点:基于Python工具,如何使用Mediapipe进行人体姿态估计
开篇,先说一个好消息,截止到2025年1月1日前,翻到文末找到我,赠送定制版的开题报告和任务书,先到先得!过期不候! 基于Python的Mediapipe人体姿态估计技术详解 在计算机视觉领域,人体…...
数据结构进阶:二叉搜索树_C++
目录 前言: 一、二叉搜索树 1.1二叉搜索树概念 2.2 二叉搜索树操作 1. 二叉搜索树的插入 1.1、插入过程 1.2、代码实现 2、二叉树的删除 2.1、结点删除情况 2.2、替换删除法 1、替换思路 2、代码实现: 3、二叉搜索树的查找 3.1、查找规则 …...
uni-app之旅-day04-商品列表
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言6. 商品列表6.0 创建 goodslist 分支6.1 定义请求参数对象6.2 获取商品列表数据6.3 渲染商品列表结构6.4 把商品 item 项封装为自定义组件在 goods_detail 组件…...
单元测试的定义
概念 单元测试是对软件中的最小可测试单元进行检查和验证的过程。在面向对象编程中,最小可测试单元通常是一个方法或者一个类。它的目的是隔离各个部分的代码,确保每个单元都能按预期工作,从而提高软件的质量和可维护性。重要性 发现早期错误…...
C语言从头学66—学习头文件 <stdio.h>(二)
关于可变参数,我们曾经在《C语言从头学27》中接触过,下面学习能够接收可变参数作为 参数的几个函数。 一、printf函数的能够接收可变参数的变体函数: 1、函数vprintf() 功能:按照给定格式,将可变参数中的内容输…...
python静默活体检测接口集成-人脸识别API-人脸认证
静默活体检测是一种不需要用户主动配合(如眨眼、点头等)的活体检测技术,通常通过摄像头采集用户的人脸图像,结合计算机视觉与AI算法来判断用户是否为真人。这项技术被广泛应用于身份验证、金融交易安全、智能门禁等领域。 确定接口…...
Ubuntu安装nvidia显卡驱动
一、安装依赖 1、更新 sudo apt update sudo apt upgrade -y 2、基础工具 sudo apt install -y build-essential cmake 图形界面相关 sudo apt install -y lightdm 注:在弹出对话框选择"lightdm" 下载nvidia驱动: 进入如下网址:http…...
再也不怕消息被撤回!Windows防撤回工具完全使用指南
再也不怕消息被撤回!Windows防撤回工具完全使用指南 【免费下载链接】RevokeMsgPatcher :trollface: A hex editor for WeChat/QQ/TIM - PC版微信/QQ/TIM防撤回补丁(我已经看到了,撤回也没用了) 项目地址: https://gitcode.com/…...
暗黑破坏神2存档编辑器完全指南:从技术原理到实战应用
暗黑破坏神2存档编辑器完全指南:从技术原理到实战应用 【免费下载链接】d2s-editor 项目地址: https://gitcode.com/gh_mirrors/d2/d2s-editor 价值定位:为什么d2s-editor能重塑你的游戏体验 你是否曾因反复刷不到心仪装备而失去耐心࿱…...
LLaMA-Omni推理部署全攻略:本地与云端部署的最佳实践
LLaMA-Omni推理部署全攻略:本地与云端部署的最佳实践 【免费下载链接】LLaMA-Omni LLaMA-Omni is a low-latency and high-quality end-to-end speech interaction model built upon Llama-3.1-8B-Instruct, aiming to achieve speech capabilities at the GPT-4o l…...
SmolVLA模型服务监控与告警体系搭建
SmolVLA模型服务监控与告警体系搭建 你刚把SmolVLA模型部署上线,看着它流畅地处理着第一批请求,心里总算踏实了点。但没过多久,问题就来了:半夜突然收到用户反馈说服务变慢了,你赶紧爬起来查,发现是GPU显存…...
Android14 SurfaceFlinger启动流程与线程调度机制解析
1. SurfaceFlinger的启动入口与初始化流程 Android显示系统的核心服务SurfaceFlinger由init进程启动,这个设计保证了它在系统早期就能准备好图形合成能力。main函数作为入口点,首先做了一系列关键初始化: 设置Binder线程池的最大线程数为4&…...
Cadence实战:从原理图到PCB的完整导入流程解析
1. Cadence设计流程概述 刚接触Cadence的硬件工程师常会遇到一个经典问题:为什么原理图设计得漂漂亮亮,导入PCB时却总出各种幺蛾子?这就像做菜时备好了所有食材,下锅时却发现灶台点不着火。我在带新人时发现,90%的导入…...
Hunyuan-MT-7B效果展示:学术论文摘要英→中翻译在专业术语一致性表现
Hunyuan-MT-7B效果展示:学术论文摘要英→中翻译在专业术语一致性表现 1. 引言:专业翻译的技术挑战 学术论文翻译一直是机器翻译领域的难点,特别是专业术语的一致性保持。传统翻译工具在处理学术文献时,经常出现术语翻译不统一、…...
3步掌控数字记忆:WeChatMsg工具让你的聊天记录不再流浪
3步掌控数字记忆:WeChatMsg工具让你的聊天记录不再流浪 【免费下载链接】WeChatMsg 提取微信聊天记录,将其导出成HTML、Word、CSV文档永久保存,对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeCh…...
批量视频加图片水印工具使用指南
软件简介批量视频加图片水印工具是一款桌面端视频水印批量添加工具,支持单张/多张水印、九宫格固定位置、四种随机位置模式、大小和透明度调节、时间间隔水印等功能。核心功能功能说明单张水印所有视频使用同一张水印图片多张随机水印从水印文件夹中随机选择水印图片…...
Phi-3-mini-128k-instruct与智能车仿真:生成自然语言控制逻辑与调试报告
Phi-3-mini-128k-instruct与智能车仿真:生成自然语言控制逻辑与调试报告 最近在折腾一个智能车仿真项目,发现一个挺有意思的事儿:让AI来帮忙写控制逻辑和看报告,效率提升了不少。以前我们得手动把“绕过前面那个障碍物࿰…...
