Vue 中封装toast 插件

当我们要实现轻提示功能时，就需要创建一个toast 组件，在指定情形下让它在页面中显示出来。

• 功能：在指定条件下弹出，显示特定信息、在指定时间后消失

• 使用情形：加载等待时弹出提示、添加购物车时弹出提示、用户下单时弹出提示等

其实可以使用组件化的思想去封装toast，在需要使用的地方挂载它就行。但是这种方式需要在每个使用到的组件中对它进行挂载、传参等操作，比较繁琐。

如果可以像使用 vue-router 时 this.$router.push('/home') 这种方式去使用toast，岂不是方便很多。

其实 vue-router 就是 Vue 的一个插件，插件通常用来为 Vue 添加全局功能。

我们的目标就是把 toast 也封装成一个插件，然后在任意组件中都可以这样使用它：this.$toast.show('加入购物车成功', 1500)。

封装toast 插件的步骤：

1. 创建toast 组件（一个居中的框，里面有提示文字）

   <!-- Toast.vue -->
   
   <template>
      <div>
          <div>{{message}}</div>
      </div>
   </template>
   
   <script>
   export default {
       name: 'Toast',
       data() {
           return {
               message: '',
               isShow: false
           }
       },
       methods: {
           // 显示函数，传入需要显示的信息，以及停留时间，默认停留2s
           show(message, duration=2000) {
               this.isShow = true
               this.message = message
   
               setTimeout(() => {
                   this.isShow = false
                   this.message = ''
               }, duration)
           }
       }
   }
   </script>
   
   <style scoped>
   .toast {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     padding: 8px 10px;
     color: aliceblue;
     background-color: rgba(0, 0, 0, 0.75);
     z-index: 9999;
   }
   </style>
   

2. 将 toast 组件的模板挂到 DOM 中，这样我们在使用插件时就不用管 DOM 了。也就是省了将标签写到 template 中的步骤，也是和组件化不同的重要一点。

   // index.js
   
   import Toast from './Toast'
   
   const toastObj = {}
   
   toastObj.install = function(Vue) {
     // 注册插件时，会自动调用插件的install函数，并把Vue对象作为参数传进来
   
     // 1. 创建组件构造器
     const toastConstructor = Vue.extend(Toast)
     // 2. 根据组件构造器，创建组件对象
     const toast = new toastConstructor()
     // 3. 将组件对象挂载到元素上
     toast.$mount(document.createElement('div'))
     // 4. 将toast 写入DOM，toast.$el 对应的是div 元素
     document.body.appendChild(toast.$el)
     // 5. 将toast 对象写入Vue 原型
     Vue.prototype.$toast = toast
   }
   
   export default toastObj
   

3. 在 main.js 中全局安装 toast 插件。

   import toast from 'components/common/toast'
   
   Vue.use(toast)
   

这样，就创建了一个toast 插件。之后在任何使用到它的地方，只需要调用this.$toast.show()，然后传入显示的想要文字以及停留的时间即可。