vue封装一个toast插件

本文学习来自于coderwhy大神的一个视频项目内。
先创建这个插件的文件夹，里边一个index.js和一个Toast.vue文件。

image.png

创建这个Toast
其实就是一个组件，只是展示方式不同。需要的时候再展示它
实现功能：
主要是实现了提示用户的功能，用户可以传入不同的展示内容，并可以设置在几秒后关闭。

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

<script>
export default {
    data(){
        return{
            isShow:false,
            message:'加载中。。。'
        }
    },
    methods:{
        show(message,duration=2000){
            this.isShow = true;
            this.message = message
            setTimeout(()=>{
                this.isShow = false
                this.message = ''
            },duration)
        }
    }
}
</script>

<style>
    .toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 10px;
  color: aliceblue;

  z-index: 9999;

  background-color: rgba(0, 0, 0, 0.75);
}

</style>

index.js内写核心内容：

//引用组件 用于Vue.use来安装
import Toast from './Toast' //引入插件组件
const obj  = {}
obj.install = function(Vue){ //install通过Vue.use安装
   // 1、必须创建组件构造器
   const toastContrustor = Vue.extend(Toast)
   //2、new的方式，根据组件构造器，可以创建出来一个组件对象
   const toast = new toastContrustor()
   //3、将组件对象toast，手动挂载到某一个元素div上
   toast.$mount(document.createElement('div'))
   //4、toast.$el对应的就是div
   document.body.appendChild(toast.$el)
   //5、将此插件添加到原型中
   Vue.prototype.$toast = toast
}
export default obj

main.js下引入这个js，并进行安装
它就会去 toast 的index.js文件里执行 install函数;
注意：use 括号中的toast 相当于是个形参它代表着 js 文件中的 obj 这个对象

import toast from './common/Toast/index.js'
Vue.use(toast)

最后，其他所有页面都能使用了

  this.$toast.show('加载一中',5000)