制作一个简单的toast弹框

toast弹框的作用

• toast弹框顾名思义，就是为了弹出一个提示框，效果如图：

• 使用toast弹框可以可用户带来更好的交互体验

toast弹框的使用

• Toast组件
  • 制做出toast的样式以及出现的条件

• 在vue原型上添加toast
  • 将toast元素挂载到body上

//index.js
import Toast from './Toast'
const obj = {}

// install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法（对外暴露一个install方法即可），同时传一个 Vue 这个类的参数。
obj.install = function(Vue) {
  // 1.创建组件构造器
  const ToastConstructor = Vue.extend(Toast)
  // 2.news的方式，根据组件构造器，可以创建出来一个组件对象
  const toast = new ToastConstructor()
  // 3.将组件对象手动的挂载到某个一个元素上，此时，toast.$el对应的就是div了
  toast.$mount(document.createElement('div'))
  // 4.将这个div作为body的子元素添加进去
  document.body.appendChild(toast.$el)
  // 5.将toast对象作为vue的原型属性，便于之后的调用
  Vue.prototype.$toast = toast
}
export default obj

• 在main中安装toast插件

import toast from 'components/common/toast/index.js'

// 安装toast（吐司）插件，用于弹出一个提示
Vue.use(toast)

• 使用toast弹框

this.$toast.show(res, 1500)