实现目标,通过$message的方式调用一个消息框,可自定义内容及设置时长。
首先自定义一个消息组件
<template>
<transition name="fade">
<div class="dialog" v-if="show">
<span>{
{
message}}</span>
</div>
</transition>
</template>
<script>
export default {
name: "Cdialog",
data(){
return{
show:false
}
},
props:{
title:{
type:String
},
message:{
type:String
},
duration:{
type:Number,
default:()=>{
return 1000
}
}
},
methods:{
onhide(){
this.show = false
setTimeout(()=>{
this.remove()
},500)
},
onshow(){
this.show = true
setTimeout(this.onhide,this.duration)
},
}
}
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: all 0.5s;
}
.fade-enter, .fade-leave-to {
transform: translateY(-20px);
opacity: 0;
}
.dialog{
background-color: white;
position:fixed;
top:100px;
left:40%;
right:40%;
padding:10px 20px;
border: #61ff00 solid 1px;
box-shadow: 0 0px 2px #61ff00;
border-radius: 10px;
}
</style>
直接全局挂载一个方法来调用,想了很久认为这个弹窗应该与最外层挂载的app同级,并且还得把这个vue转成真实dom再append到body下,就想着直接用Vue的createElement方法去生成一个真实dom也就是render:h => h(Cdialog,{props}),然后再将生成的真实dom挂载到body上,试一试
function showMsg(props){
const vm = new Vue({
render:h => h(Cdialog,{
props})
}).$mount(document.body)
const comp = vm.$children[0]
comp.remove = ()=>{
document.body.removeChild(vm.$el)
vm.$destroy()
}
comp.onshow()
return comp
}
效果是有了,但原本的body内的元素被代替掉了,这就产生一个问题,因为这个消息弹窗组件接受传参的时候必须经历更新的过程,但mounted和update方法又必须在mount也就是挂载之后才会执行更新方法,这里就采用一个虚拟挂载的方式,也就是去掉mount内的节点,只执行挂载方法,这样同样能起到更新的方式,修改代码:
function showMsg(props){
const vm = new Vue({
render:h => h(Cdialog,{
props})
}).$mount()
document.body.appendChild(vm.$el)
const comp = vm.$children[0]
comp.remove = ()=>{
document.body.removeChild(vm.$el)
vm.$destroy()
}
comp.onshow()
return comp
}
Vue.prototype.$message = showMsg
运行成功,也没有报错,看似已经成功但检查dom模块的时候发现了一个问题
多次点击虽然弹出框已经被隐藏,但并没有被remove方法执行,去掉hide方法中的settimeout后果然报了一个错误,问题在于在show变成false的时候,这里的这个dom其实就已经不存在了,导致0.5s后的remove方法找不到dom节点而造成内存损耗,解决方案有两种,一个时在最外层再嵌一层div或者把v-if="show"改成v-show即可。