Naive UI使用useDialog、useMessage、useNotification、useLoadingBar，超实用

本人是使用的vite3+vue3+TS+Naive UI

标题提到的四个组合API都是需要在setup中使用的，如果脱离，就会报错，在搭建框架的时候又需要脱离单独使用。搜索了好多的解决方案，大都是将他们注册到window中，然后再全局调用。

比如在路由守卫中需要使用useDialog做一个加载动画，在封装的Request增加一些提醒等，都是需要脱离setup的。

其实官方已经想到了，已经不需要将他们注册到window中。上图

在2.29版本中增加了一个非常NB的且方便的API

我在需要使用的文件中加入createDiscreteApi即可，下面这个是我使用的简单的例子，在路由守卫中先引入，然后即可调用

import { createDiscreteApi } from 'naive-ui'
const { loadingBar } = createDiscreteApi(['loadingBar'])//....router.afterEach(() => {loadingBar.finish()
})

Naive UI使用useDialog、useMessage、useNotification、useLoadingBar，超实用相关推荐

源码级剖析了 Naive UI 的 Button 完整过程
注意:为了让篇幅尽可能简洁一丢丢,在有些地方贴源码时,我尽可能贴最能反映要讲解内容的源码,其他重复性的代码就略去了,所以如果你自己尝试去阅读源码时,可能会发现和文章里的代码有出入.文章跑通 Naive ...
Naive UI - 火热出炉！基于 Vue 3.0/TypeScript 的免费开源前端 UI 组件库
非大厂 KPI 项目!开源三天就收获 800 Star,还获得 Vue 作者尤雨溪的官方推荐. 关于 Naive UI Naive UI 是一款基于当前比较新的 Vue 3.0/TypeScript ...
Nuxt3 + Naive UI 的SSG项目分享（一）
搭建Nuxt3项目分享你好! 这是写在分享前的前言,主要是想谈谈分享的初心,它涉及两个方面:一是整理并且巩固自己的技术应用的知识,用于查漏补缺之用:二则是秉承互联网精神,在网络上相互分享,相互协作. ...
Naive UI修改默认样式
一.问题描述因为大创的缘故,需要做出一个网站,在搭建网站的过程中需要使用Naive UI框架,在设置样式的时候一直无法修改默认样式.小白不知道应该如何使用样式穿透,同时和Naive UI相关的博客比 ...
Vue3 UI组件库对比，Naive UI、Element Plus、 Ant Design Vue
对比图 \ Element Plus Naive ui Ant Design Vue 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库阿里Ant Desi ...
Naive UI的安装及使用
一.安装首先安装Naive UI的包 npm i -D naive-ui 再安装字体库 npm i -D vfonts 二.全局引入 main.js中添加代码 import naive from ' ...
修改naive ui默认样式，css变量值修改
新项目开发使用了naive ui组件库,使用组件时涉及到css样式修改,可以直接在组件父容器上使用组件内自带的css变量,组件会自动继承父容器的css变量值,不会影响其他页面使用: 示例:一个注册表单 ...
修改默认naive ui样式
修改默认naive ui样式在使用n-slider的时候不想显示marks的标记小点点.查了一下资料记录一下. 有些时候,修改不生效,看了一个帖子生效了记录一下参考文章的地址参考代码 <t ...
vue3 使用render函数渲染插槽,以Naive UI为例
Vue3使用render函数渲染插槽,以Naive UI为例网上有好多解释rende函数和插槽原理的文章,不可否认他们的水平都比我高,只是我这篇文章更加注重"术\法\道"中的术, ...

Naive UI使用useDialog、useMessage、useNotification、useLoadingBar，超实用

Naive UI使用useDialog、useMessage、useNotification、useLoadingBar，超实用相关推荐

最新文章

热门文章