封装成插件---Toast

将Toast组件封装成插件形式

需求：经常会有提示框，多个页面使用，但是提示框的大小、icon图标等会变化。

思路：多个页面使用，可以封装成。但是需要多次引人标签，有点繁琐。

一、创建Toast组件

二、组件使用形式

this.$refs.tip.showToast({//其他值不传，是按默认值
  text: 'HAHAHAHAH',
  time:5000
});

三、封装成插件的形式

• 在组件中建一个js文件(toast/index.js)

import Toast from './Toast'
const obj={};
obj.install=function (Vue) {
  //1、创建组件构造器
  const toastContrustor=Vue.extend(Toast);
  //2、new的方式，根据组件构造器，可以创建出来一个组件对象
  const toast =new toastContrustor();
  //3、将组件对象，收手动挂载到某一个元素上去
  toast.$mount(document.createElement('div'));
  // 4、toast.$el对应的就是div
  document.body.appendChild(toast.$el);
  Vue.prototype.$toast=toast
}
export default obj

• 安装组件

import toast from 'components/common/toast/index'
// 安装toast插件
Vue.use(toast);//使用use,就会去执行tip的install函数

• 插件的使用

this.$toast.showToast({
  text: 'HAHAHAHAH',
  time:5000
})