工程化:vite4和vue3里面的toast组件封装及命令式调用

已于 2023-12-27 16:35:23 修改
阅读量1k 收藏 1
点赞数
分类专栏： 移动端vant组件的深入研究 文章标签： vue.js javascript 前端
于 2023-05-04 17:33:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27702739/article/details/130491349
版权
本文介绍了如何在Vue3和Vite4项目中封装一个既能作为组件使用，也能进行命令式调用的Toast提示组件。通过核心代码展示了在没有`this`的情况下，实现命令式调用提示框的方法。
摘要由CSDN通过智能技术生成

在vue项目中我们要创建命令式的提示框，比如elementui里面都是this. m e s s a g e , t h i s . message,this. message,

了解本专栏 订阅专栏 解锁全文 超级会员免费看
风清云淡_A
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
vue-toaster:Vue 3的Vue.js Toast通知插件
05-23
Vue烤面包机 Vue 3的Vue.js Toast通知插件 安装 # yarn yarn add @meforma/vue-toaster # npm npm install @meforma/vue-toaster 进口 // In you main.js // ... considering that your app creation is here import Toaster from "@meforma/vue-toaster" ; createApp ( App ) . use ( Toaster ) . mount ( "#app" ) ; 用法 // this.$toast.show(message, {/* options */}); this . $toast . show ( `Hey! I'm here` ) ; this . $toast . succe
Vue3封装自定义Toast组件
weixin_47340789的博客
09-08 962
Vue3封装自定义Toast组件
Vue 3 中创建一个动态的组件实例
最新发布
weixin_51353891的博客
07-11 525
本文将介绍如何在 Vue 3 中实现一个动态 Toast 组件实例。我们将创建一个简单的 Toast 组件，并使用一个动态创建实例的脚本来显示 Toast 消息。
Vue3 实现一个自定义toast（小弹窗）
fang_my的博客
09-10 5248
前两天在项目中很多场景下都需要用到一个toast弹窗，项目使用的是ionic+tialwind_Css，ionic也有自带的toast弹窗，虽然大部分场景下直接调用它提供的api已经能满足需求了，但是它弹窗的高度，（也就是弹窗出现的位置）并不是高度自定义的，并且弹窗的z-index在我们项目中会和一些组件冲突，但是这个之前一直没有办法解决，所以干脆自己手写了一个使用方法高度类似ionic_Toast的组件。但是处于复用性考虑，我们的toast的宽度是不能设置固定宽度的，具体的宽度是由当时文字的大小决定的。
Vue3版本开发toast插件
正在解锁骑着骆驼去南极的世界
11-21 731
Vue3的Toast插件是一种消息提示组件，主要用于消息通知、加载提示、操作结果提示等醒目提示效果。Toast组件几乎是没有个组件库必备的组件，通过Toast组件开发可以比较全面的学习Vuejs的相关技能点。在src目录下新建文件夹plugins，在plugins中新建文件夹my-toast，然后在这个文件夹里新建一个mytoast.vue和一个index.ts。到现在就是可以打印出虚拟节点vm的内容看一下，就是。这就是调用了onClose方法。三秒后会消失，并且控制台打印。
Vite + Vue3 +Vant4构建项目时，按需引入使用Toast组件，引用 showToast 时出现编译报错的解决方案
m0_52459016的博客
02-10 7130
Vite + Vue3 +Vant4构建项目时，按需引入使用Toast组件，引用 showToast 时出现编译报错的解决方案
在Vite + Vue3 +Vant4中按需引入组件，使用Toast提示信息不展示
qq_44741577的博客
02-04 1336
时死活不显示，实际排查后发现只是不显示，其实元素已经挂载到。这些组件时完全没有问题，但是在使用轻提示（+ vue3 + vite 搭建h5，元素下了，只是因为样式原因导致看不见。这个插件对某些组件的样式无法引入。
1.（vue3.x+vite）封装组件.rar
09-19
标题 "1.（vue3.x+vite）封装组件.rar" 提示我们这是一个关于使用 Vue.js 3.x 和 Vite 框架进行组件封装的项目。Vue.js 是一个流行的前端JavaScript框架，而 Vite 是由 Vue.js 作者尤雨溪开发的新型构建工具，它提供...
20.（vue3.x+vite）Vue子组件和父组件执行顺序.rar
09-21
在Vue.js框架中，尤其是最新的3.x版本与Vite构建工具的结合，理解子组件和父组件的执行顺序是至关重要的。Vue的生命周期是每个组件从创建到销毁的过程，其中包括了初始化、挂载、更新和卸载等阶段。在父子组件的关系...
vue3 表格组件封装复用
02-27
在Vue3中，组件封装是提高代码复用性和效率的关键技术。本项目专注于实现一个可编辑的表格组件，旨在帮助开发者更好地理解和应用Vue3的组件化思想，提升面试竞争力，并优化开发流程。以下是对这个表格组件封装过程的...
2.（vue3.x+vite）组件注册并调用.rar
09-19
在Vue 3.x框架中，配合Vite构建工具，组件注册和调用是核心的开发概念，对于构建可复用、模块化的前端应用至关重要。Vue 3引入了若干改进，如Composition API，使得组件设计更加灵活高效。Vite，由Vue.js作者尤雨溪...
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
解决vue3中按需引用Toast,使用Toast方法时报is not a function问题
weixin_46605992的博客
08-11 3276
Toast中is not a function问题
Vue3封装全局函数式组件
前端咸鱼翻身的博客
04-13 6218
Vue3函数式组件，Vue3编写插件
在Vue3.0中定义vant的toast全部提示
impossible1994727的博客
06-20 4492
在vue3中挂载全局方法
vue3基础-实战3: Toast插件与项目打包
...
02-29 459
最后完成Toast插件和打包，项目就完成了： 1.封装的Toast插件； 2.打包并在安卓手机上运行；
在vue3中使用primevue的Toast组件作为全局请求反馈
m0_60541110的博客
04-20 3445
关于vue3中获取app实例，vue3中使用primevue的toast组件作为request请求反馈
Vite3+Vue3+TS+Ant-design-vue3全栈实战：快速构建与配置教程
本篇文档详细介绍了如何进行全栈开发实战，主要结合了前端技术Vite3、Vue3、TypeScript (TS) 和 Ant-Design-Vue3，以及后端技术SpringBoot、MybatisPlus和MySQL。以下是关键知识点的总结： 1. **前端技术栈搭建** ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值