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

参考文章：

关于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')

原文地址：https://blog.csdn.net/qq_46123200/article/details/142776280

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！