前端开发中很多时候都需要用弹框来提示用户一些信息，出于练手自己手动创建一个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.最后在任意组件中调用即可
如图：
任意组件中调用
展示效果
