手摸手教你写一个vue的toast弹窗

摘要：我们在项目开发的过程中，也许会在很多页面实现弹窗的消息，普通的方法就是在这每个界面写些原生js代码来控制弹窗效果，这样明显非常冗余。可通过引入组件的方式，可解决部分冗余的代码，但是每个要使用的界面都必须导入、注册、使用，这些代码还是比较冗余。通过插件的方式封装Toast，可解决每个页面重复导入、注册、使用的重复过程。

一. 封装Toast组件

css自行设计

二. Toast插件方式的封装

在使用Toast前需要做相应的准备工作：

1. 添加一个index.js文件
   - 里面定义一个对象
   - 然后导出
   

2. 然后在main.js文件中导入toast文件（默认是将toastl里面的index文件导进去） ，在使用Vue.use()将Toast作为插件的方式安装进来，main.js只要已启动，toast就会安装好。而且一旦调用Vue.use(toast)本质上是去调用toast里面对象的install，而这个对象的install就是index文件里面的函数，这样便可在install里面将所有要预备好的东西预备好
   

3. 如果Vue.prototype.$toast=Toast中$toast代表Toast，那么就将Toast赋值给$toast，但是这样仅仅是将Toast放到Vue的原型上面去，但是Toast有自己的template，要显示template的内容，而不会将该template添加到body里面去，此时template里面的内容是不显示的，因为他是插件。若是单纯的组件的话，是会经过引入注册使用这些步骤，则会直接渲染template。所以要想将Toast里面的template的内容添加到某个元素上，需要手动添加，代码实现如下。

完善后的index.js文件：

4. 然后在要使用弹窗的界面添加代码即可。
   例：this.$toast.show(res,2000)-----该show方法是在Toast.vue里面定义的。

最终的弹窗效果图：

以上是toast两种方式的封装~~