【UI】将 naive ui 的 message 封装进axios 中,关于naiveui的message相关的用法

文章目录

参考文章:

关于naiveui的message相关的用法

前言

最近新建了一个vite + vu3 的项目,完全是从0 到1 ,封装到request 的时候 想对axios 请求做一个全局的处理,但发现naive uimessage 不像element ui 那样使用起来方便。多方查找资料文章终于将 message 封装进request 中,算是解决了这个问题。写这篇文章记录加深印象,防止下次再遇到。

在setup外进行使用

如果你想在 setup 外使用 useDialog、useMessage、useNotification、useLoadingBar,可以通过 createDiscreteApi 来构建对应的 API。

直接上代码,在请求的api中使用,代码如下:

javascript 复制代码
//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。

官方例子:

javascript 复制代码
<!-- App.vue -->
<n-message-provider>
  <content />
</n-message-provider>

不少同学还是不知道咋用,往下看,复制粘贴就完事

App.vue

javascript 复制代码
<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文件中使用,直接引入使用就好

javascript 复制代码
import { useMessage } from 'naive-ui'
const message = useMessage()
message.warning('hello')
相关推荐
迷曳13 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
R-G-B15 小时前
【27】MFC入门到精通——MFC 修改用户界面登录IP IP Address Control
tcp/ip·ui·mfc·mfc 用户界面登录·mfc ip登录·mfc address登录
布兰妮甜18 小时前
Adobe Photoshop:数字图像处理的终极工具指南
图像处理·ui·adobe·photoshop
orange_の_呜1 天前
Adobe illustrator、klayout绘制光刻图及其尺寸映射
ui·adobe·illustrator
共享ui设计和前端开发1 天前
数字孪生技术引领UI前端设计新高度:跨平台数据一致性的可视化
ui
簪花走马过长安3 天前
【PDF识别改名】使用京东云OCR完成PDF图片识别改名,根据PDF图片内容批量改名详细步骤和解决方案
ui·pdf·ocr·excel·京东云·wps·图片区域识别重命名
枯萎穿心攻击3 天前
响应式编程入门教程第三节:ReactiveCommand 与 UI 交互
开发语言·ui·unity·架构·c#·游戏引擎·交互
SEO-狼术4 天前
DevExtreme Complete Crack,responsive UI widgets
ui
ui设计前端开发老司机4 天前
从数据洞察到设计创新:UI前端如何利用数字孪生提升产品交互体验?
前端·ui·交互
前端开发与ui设计的老司机5 天前
从UI设计到数字孪生实战应用:构建智慧金融的风险评估与预警平台
ui·金融