贵阳网站定制开发,wordpress如何实现用户注册,优秀茶叶网站设计,wordpress排版分栏文章目录 前言在setup外进行使用直接包裹使用vue 单文件中使用 参考文章#xff1a;
关于naiveui的message相关的用法
前言
最近新建了一个vite vu3 的项目#xff0c;完全是从0 到1 #xff0c;封装到request 的时候 想对axios 请求做一个全局的处理#xff0c;但发现… 文章目录 前言在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-providercontent /
/n-message-provider不少同学还是不知道咋用往下看复制粘贴就完事
App.vue
templaten-config-providern-modal-providern-message-providerrouter-view /TheMessage/TheMessage/n-message-provider/n-modal-provider/n-config-provider
/templatescript setup
import { NConfigProvider } from naive-ui;
/scriptstyle scoped/stylevue 单文件中使用
至于在vue文件中使用直接引入使用就好
import { useMessage } from naive-ui
const message useMessage()
message.warning(hello)
