本文学习来自于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)
