vue3使用naive-ui的message弹窗

本文通过对Naive UI、Element Plus和Ant Design Vue三大主流Vue3 UI库的全面对比，揭示了Naive UI在多维度的卓越表现。从架构设计来看，Naive UI采用组合式开发理念，源码组织结构更合理，充分运用Vue3响应式特性；性能测试显示其在表格组件渲染、表单操作等场景下显著领先；开发体验方面，Naive UI提供近乎完美的TypeScript支持和高效的文档系统；独特的主题架构实现毫秒级切换。尽管社区规模稍逊，但其优异的性能、现代化架构和卓越的开发体验，使Naive UI

vue+Naive实现简单弹框。

什么是命令式（也可以称为函数式）弹窗呢？通常我们在vue的开发中想要使用弹窗，会先在中定义好元素，然后利用变量来控制dialog的显示隐藏，这种属于声明式弹窗。但是在一些场景中，比如我们封装的一些工具函数、hooks、插件等中没办法像在单文件组件中一样将dialog写到template中，或者一些公共的弹窗使用声明式弹窗会比较臃肿，这个时候命名式的调起弹窗就派上用场了。

nativeUI管理系统原生界面，可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等。 方法：actionSheet: 弹出系统选择按钮框 alert: 弹出系统提示对话框 confirm: 弹出系统确认对话框 closeWaiting: 关闭系统等待对话框 showWaiting: 显示系统等待对话框 pickDate: 弹出系统日期选择对话框 pickTime: 弹出系统时间选

不像vue2中使用element UI这么方便，vue3中使用message的配置方法如下： 1，增加一个组件 message-api.vue <template> <div></div> </template> <script> import { defineComponent, getCurrentInstance } from "vue"; import { useMessage } from "naive-ui"; expor

Naive UI在Vue3组件库中算是相当优秀的了，组件完整、主题可调，并且所有组件都可以 treeshaking，整体风格清爽，也得到了尤大赞扬和肯定，目前github 9.2k star，作为一款没有Vue2用户积淀的UI组件库已经很不错了UI组件篇完结如有跟着一起做的同学可以git提交一下代码，如有错误之处请在评论区提醒指正，下一篇再见~

Application.vue内容如下：（这里顺便把其他常用的组件一起封装了，方便后续使用，要是就用message就只要封装一个就行。

createVNode用h函数是等效的,h重载是对各种createVNode传参的统一处理(packages\runtime-core\src\h.ts)

这里实现一个极简易弹窗作为示例，其他功能和样式可自行补充和优化；

vue3弹窗的使用

【宇宙最强】 史诗级vue3 函数式弹窗 ！！！

【代码】Vue3封装可拖拽的弹窗。

怎么使用naiveui的message消息模块

前两天在项目中很多场景下都需要用到一个toast弹窗，项目使用的是ionic+tialwind_Css，ionic也有自带的toast弹窗，虽然大部分场景下直接调用它提供的api已经能满足需求了，但是它弹窗的高度，（也就是弹窗出现的位置）并不是高度自定义的，并且弹窗的z-index在我们项目中会和一些组件冲突，但是这个之前一直没有办法解决，所以干脆自己手写了一个使用方法高度类似ionic_Toast的组件。但是处于复用性考虑，我们的toast的宽度是不能设置固定宽度的，具体的宽度是由当时文字的大小决定的。