vue 封装toast插件

自己封装插件，可以简单理解成是一种比封装组件更高级的代码复用。

新增文件 

在 components / common / toast 文件夹下，新增文件 Toast.vue 和 index.js ，代码如下：

Toast.vue

一个模板文件。

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

<script>
export default {
  name: "Toast",
  data() {
    return {
      message: "",
      isShow: false
    };
  },
  methods: {
    show(message = "默认文字", duration = 1500) {
      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;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.6);
}
</style>

index.js

当在别的地方引用 toast 后，Vue.use 时会执行该文件中的的 install 。

import Toast from './Toast'
import Vue from 'vue'

const obj = {}

obj.install = function (Vue) {
  // 创建组件构造器
  const toastConstructor = Vue.extend(Toast)
  // new的方式。根据组件构造器，可以创建一个组件对象
  const toast = new toastConstructor()
  // 将组件对象手动挂载到某一个元素上
  toast.$mount(document.createElement('div'))
  // toast.$el对应的就是DIV
  document.body.appendChild(toast.$el)

  Vue.prototype.$toast = toast
}

export default obj

引入插件

因为这个可以作为全局插件引用，所以在 main.js 引入。如果不是全局插件，可以在某个具体页面中引入。

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

Vue.use(toast)

使用插件

把参数传过去，即可通过一行代码调用插件。

var message = "123456";
this.$toast.show(message, 1500);