toast提示的插件封装

项目使用vue2，vue-cli3搭建

第一步：创建toast组件

• Toast.vue ```html

<a name="fcqGP"></a>
### 第二步：封装toast插件

- index.js
```javascript
import Toast from './Toast.vue'    //引入toast组件
const obj = {} //新建插件
// 设置插件的install方法，在使用时（Vue.use(obj)），就会调用该插件的install方法
obj.install=function(Vue){
  // 1.创建组件构造器
  const toastConstructor = Vue.extend(Toast)
  // 2.生成组件对象
  const toast = new toastConstructor()
  // 3.挂载组件到div上
  toast.$mount(document.createElement('div'))
  // 4.将div包含toast的template挂载到body上
  document.body.appendChild(toast.$el)
  // 将toast组件对象放到vue原型上
  Vue.prototype.$toast = toast
}

export default obj  //向外暴露插件，并且在main.js中引用

第三步：在项目入口文件中使用toast插件

• main.js ```javascript // 引入toast插件 import toast from ‘components/common/toast/index.js’ …

// 使用toast插件 Vue.use(toast)

new Vue({ router, store, render: h => h(App), }).$mount(‘#app’)

<a name="fuolb"></a>
### 第四步：在其他组件中使用toast
```javascript
...
this.$toast.show("这是toast提示内容",2000)
...