Vue封装一个自定义插件（Toast插件）

使用效果

  this.$toast.show(“去计算”);

代码

index.js

import Toast from "./Toast";

const obj = {};

obj.install = function(Vue) {
  console.log("======");

  //1 创建组件构造器
  const toastContrutor = Vue.extend(Toast);

  //2 new的方式，根据组件构造器，可以创建一个组件对象
  const toast = new toastContrutor();

  //3 将组件对象，手动挂载到某一个元素上
  toast.$mount(document.createElement("div"));

  //4 toast.$el对应的就是上面挂载的div
  document.body.appendChild(toast.$el);
  
  //5装入vue原型
  Vue.prototype.$toast = toast;
};

export default obj;

Toast.vue

<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 = "toast", duration = 2000) {
      this.isShow = true;
      this.message = message;
      setTimeout(() => {
        this.isShow = false;
        this.message = "";
      }, duration);
    }
  }
};
</script>

<style scoped>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  padding: 8px 10px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.75);

  z-index: 999;
}
</style>

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import toast from 'components/common/toast'

Vue.config.productionTip = false;
Vue.prototype.$bus = new Vue();
//使用自定义组件
Vue.use(toast)

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