首先我们要知道我们这个toast组件是怎么调用的，一般来说都是全局的 类似于这样
this.$toast({
content:'你好',
duration:2000
}).show();
所以我们需要向vue的prototype 绑定一个$toast方法
import Vue from 'vue'
import toast from './component/toast'
Vue.prototype.$toast = toast;
我们的文件大概是这样的 一个js 一个vue文件
image.png
- index.js
import Vue from 'vue';
import Toast from './index.vue'
export default function toast (props){ // 导出一个方法 方法接受一个参数
const vm = new Vue({ // 生成一个vue实例
render (h) { // 虚拟dom
return h(Toast,{props})
}
}).$mount();// 创建一个组件实例 这里不能挂载到body上 必须手动append
document.body.appendChild(vm.$el); // append 组件dom
const comp = vm.$children[0]; // 获取实例内第一个组件 也就是toast.vue 因为就这一个
comp.remove = function () { // 穿建一个销毁方法 避免内存泄漏
document.body.removeChild(vm.$el);
vm.$destroy()
}
return comp // 最后我们吧这个组件return出去
}
- index.vue
<template>
<div class="toastInfo" v-show="isShow">{{content}}</div>
</template>
<script>
export default {
name: "index",
data () {
return{
isShow:false
}
},
props:{
content:{
type:String,
required:true
},
duration:{
type:Number,
default:1500
}
},
methods:{
show () {
this.isShow = true;
setTimeout(()=>{
this.hide()
},this.duration)
},
hide (){
this.remove()
}
}
}
</script>
<style lang="less" scoped>
.toastInfo{
position: fixed;
left: 50%;
top: 10px;
transform: translateX(-50%);
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px 10px;
border-radius: 2px;
}
</style>
