大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
摘要：我们在项目开发的过程中，也许会在很多页面实现弹窗的消息，普通的方法就是在这每个界面写些原生js代码来控制弹窗效果，这样明显非常冗余。可通过引入组件的方式，可解决部分冗余的代码，但是每个要使用的界面都必须导入、注册、使用，这些代码还是比较冗余。通过插件的方式封装Toast，可解决每个页面重复导入、注册、使用的重复过程。
一. 封装Toast组件
css自行设计
二. Toast插件方式的封装
在使用Toast前需要做相应的准备工作：
-
添加一个index.js文件
– 里面定义一个对象
– 然后导出
-
然后在main.js文件中导入toast文件（默认是将toastl里面的index文件导进去） ，在使用Vue.use()将Toast作为插件的方式安装进来，main.js只要已启动，toast就会安装好。而且一旦调用Vue.use(toast)本质上是去调用toast里面对象的install，而这个对象的install就是index文件里面的函数，这样便可在install里面将所有要预备好的东西预备好
-
如果Vue.prototype.$toast=Toast中$toast代表Toast，那么就将Toast赋值给$toast，但是这样仅仅是将Toast放到Vue的原型上面去，但是Toast有自己的template，要显示template的内容，而不会将该template添加到body里面去，此时template里面的内容是不显示的，因为他是插件。若是单纯的组件的话，是会经过引入注册使用这些步骤，则会直接渲染template。所以要想将Toast里面的template的内容添加到某个元素上，需要手动添加，代码实现如下。
完善后的index.js文件：
- 然后在要使用弹窗的界面添加代码即可。
例：this.$toast.show(res,2000)—–该show方法是在Toast.vue里面定义的。
最终的弹窗效果图：
以上是toast两种方式的封装~~
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/189738.html原文链接：https://javaforall.net
