Vue2中 toast封装-插件方式的封装

采用普通方式封装有时候存在一些壁垒

采用插件方式封装，可直接调用插件的安装函数 $toast.show（）在页面显示即可, 方便多处调用。

原理：将toast封装在插件中 ----安装插件----组件创建开始就添加到body中---利用插件的安装函数在页面显示

步骤1：自行新建toast组件

<template>
<div class="toast" v-show="isShow">
  <div >{{message}}</div>
</div>
</template>

<script>
export default {
  name: "Toast",
  data() {
    return {
      isShow: false,
      message: ''
    }
  },
  methods:{
    show(message="默认值",duration = 1500){

      this.isShow = true;
      this.message = message;

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

步骤2：index.js中新建obj对象

import Toast from "./Toast";
import Vue from "vue";

const obj = {}


export default obj

步骤3：main.js中安装toast插件

import Vue from 'vue'
import App from './App.vue'

import toast from "components/common/toast" //导入自己封装的toast插件


// 安装toast插件
Vue.use(toast);


new Vue({
  render: h => h(App),
  router,
  store,

}).$mount('#app')

步骤4：index.js中--安装toast过程中成功添加到Vue原型上

import Toast from "./Toast";
import Vue from "vue";

const obj = {}

obj.install=function(vue){
  
//  1.创建组件构造器
  const toastConstructor = Vue.extend(Toast);
//  2.使用new创建一个组件实例对象
  const toast = new toastConstructor();
//  3.将这个实例对象挂载到某个div上
  toast.$mount(document.createElement('div'))
//  4.toast.$el对应的就是div
  document.body.appendChild(toast.$el)
//  5.将实例添加到Vue的prototype上
  Vue.prototype.$toast = toast;
};

export default obj

步骤5：使用$toast中show方法显示toast

this.$toast.show()

---

结果展示：

 toast封装-插件方式的封装价值和意义在于封装一次，可以在多处直接使用$toast.show('商品成功添加到购物车'，2000)来显示所需要的toast。

与传统方式封装相比，在多次引用组件时候，避免了频繁的  引入组件-注册组件-显示组件-向子组件传递参数等多次流程