记一个自定义消息弹窗踩坑

实现目标，通过$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即可。