9.封装Toast

如下图所示，我们要创建如下图所示的提示信息，也就是在点击加入购物车后显示提示信息

一般的思路就是创建对应的组件，然后在props定义一个message用来接收使用该组件所要传递的值，和一个isShow用来确定它是否显示，然后再在引用他的组件中去绑定isShow和message，同时在methods去实现点击或者其他操作时弹窗具体内容以及显示的时间（setTimeout()）,这是一般我们的封装思想以及思路，但是在每个要引用它的组件都要做相应的操作以及传递message和isShow，并不是很方便，可不可以直接通过一个方法就实现该操作呢

例如，可不可以通过$toast.show(message，time)就可以实现弹窗内容以及弹窗显示时间呢，既然我都说了，那答案必须是肯定的

首先我们在components的common创建toast文件夹，以及创建Toast.vue和index.js文件，toast先设置相关的样式

在index.js中，我们主要做这几件事，Toast组件的创建、挂载以及导出等

定义一个obj对象用来存储一个安装函数install，从而安装toast（注意：install是固定的，不允许改成其它名字，否则会安装失败）

import Toast from './Toast'

const obj = {}

//必须为install
obj.install = function(Vue) {
  //1.创建组件构造器
  const toastContructor = Vue.extend(Toast)

  //2.创建组件
  const toast = new toastContructor()

  //3.手动挂载
  toast.$mount(document.createElement('div'))

  //4.添加至页面
  document.body.appendChild(toast.$el)
  
  //5.挂载在Vue实例上
  Vue.prototype.$toast = toast
}

export default obj

然后就是在main.js导入并安装

//toast导入
import toast from 'components/common/toast/index'
//安装toast
Vue.use(toast)

然后再在toast.vue去完成组件使用方法（放出全部js代码）

export default {
  name: 'Toast',
  data() {
    return {
      isShow: false,
      message: ''
    }
  },
  methods: {
    show(message, duration=2000) {
      this.isShow = true
      this.message = message

      setTimeout(() => {
        this.isShow = false
      },duration)
    }
  }
}

这样我们在需要用到该组件的地方就可以直接通过this.$toast.show(message，time)去实现了，不需要导入任何其它组件，因为在该项目里已经全局定义了

在Detail实现，这样我们就可以根据之前所做的Promise，将商品状态展示

this.addCart(product).then((res) => {
  this.$toast.show(res)
})