封装独立的Vue通用组件:可复用的单文件式全局Toast弹窗

最近突然很想简化一些自己写的,项目常用的调用小功能,比如一些弹窗等等,之前都是H/J/C分离,每次复用都要分别写到对应的文件里,略显麻烦。

最近看了Vue官网有关于插件打包的说明,尝试了一下还可以,目前成功打包了一个Toast组件。以后每次项目要用到Toast弹窗,只需要引入一个 showToast.vue 即可直接生效调用,而不必在多个文件里维护自己的那部分代码。

功能说明

1、支持自定义弹窗文案,并自动计算弹窗的高度调整在屏幕的位置,以一直保持居中

2、支持自定义弹窗显示时长(默认2秒,单位毫秒)

使用方式

1、将 showToast.vue 文件放置于项目的模板文件夹(个人习惯为 src/components)

2、打开 App.vue,引入vue和showToast组件,并use该组件(其实是use组件里的方法,只不过打包为一个文件了)。

3、之后在App.vue或者任意子组件里,就可以直接通过 this.$showToast(文案,显示时间) 去唤起Toast弹窗了。

效果预览

组件源码

我使用的是stylus,样式在这里就随便写一下,请根据实际项目需要做调整和本地备份。

保存为 showToast.vue 文件到项目模板文件夹下即可,以后如果要引用,就直接引入该文件就ok。

为您推荐

Leave a Reply

Your email address will not be published. Required fields are marked *