Vue.js中手动创建一个Toast插件

前端开发中很多时候都需要用弹框来提示用户一些信息，出于练手自己手动创建一个Toast插件。

1.创建一个toast文件夹

首先创建一个文件夹，我这里是公用组件都放在一起，在目录下创建Toast.vue和index.js文件；

如图： 目录结构

2.编写Toast.vue文件

不多说直接上代码：

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

<script>
export default {
  name: "Toast",
  data() {
    return {
      message:'',
      isShow: false,
    };
  },
  methods:{
    show(message,time = 2000){
      this.message = message;
      this.isShow = true;
      setTimeout(()=>{
        this.isShow = false
      },time)
    }
  }
};
</script>

<style scoped>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 3px;
  z-index: 99999;
}
</style>

定义了提示消息message和显示时间time,并根据自己需要修改默认值；

3.编写index.js文件

话不多说，直接上代码

import Toast from './Toast'
const obj = {};

obj.install = function (Vue) {
  //1.创建组件构造器
  const toastContrustor = Vue.extend(Toast);

  //2.创建组件构造器实例
  const toast = new toastContrustor();

  //3.手动将实例挂载到body上
  toast.$mount(document.createElement('div'));

  //渲染到body里面
  document.body.appendChild(toast.$el);

  Vue.prototype.$toast = toast;
}

export default obj

因为是插件形式，所以需要创建install函数。

4.在main.js中写入一些代码

import Toast from 'components/common/toast' //这里改成自己对应的路径
Vue.use(Toast)

5.最后在任意组件中调用即可

如图： 任意组件中调用 最后成功显示啦！ 展示效果