弹窗类组件特点

一般独立于当前Vue实例之外，常挂载于body上；它是通过js动态创建的，不需要任何声明。
常见使用格式：
// Notice 组件名
this.create(Notice,{
title:‘标题’,
msg:‘内容’，
duration：1000}
).show()

首先创建create函数js文件

用于动态创建指定组件实例并挂在到body上

代码如下：（关键部分本人全加上注释，且组件注重结构实现不注重样式，若有疑问请评论我看到就回复）

// 创建指定实例并挂载到body上
import Vue from "vue"

export default function create(Component, props) {
  // Component组件名  props组件的配置参数
  // 1 创建vue实例
  const vm = new Vue({
    render(h) {
      // render方法提供一个h方法，可以用来渲染虚拟dom（VNode）
      // 2 创建组件实例
      return h(Component, {props})
    }
  }).$mount() // $mount非常重要，用于挂载
  // 3通过 $children或$root获取该组件实例
  console.log('组件实例', vm);
  const comp = vm.$children[0]

  // 4将dom实例（注意不是组件实例comp）追加至body
  document.body.appendChild(vm.$el)

  // 5 清理实例，防止内存泄漏
  comp.remote = () => {
    // 从body中清除dom
    document.body.removeChild(vm.$el)
    // 当前vue组件实例也要销毁
    vm.$destroy()
  }

  // 返回组件实例
  return comp
}

}

notice弹窗组件

<template>
  <div class="notice">
    <p>{{ title }}</p>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    msg: {
      type: String,
      default: "",
    },
    // 存在时间
    duration: {
      type: Number,
      default: 2000,
    },
  },
  data() {
    return {
      // 是否显示弹窗
      isShow: false,
    };
  },
  methods: {
    // 展示
    show() {
      this.isShow = true;
       // 定时销毁
      setTimeout(() => {
        this.hide();
      }, this.duration);
    },
    // 隐藏并销毁组件
    hide() {
      this.isShow = false;
      // create里定义的销毁函数
      this.remote();
    },
  },
};
</script>

<style>
.notice {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  height: 60px;
  line-height: 60px;

  width: 400px;
  border-radius: 10px;
  background-color: rgb(205, 255, 213);
  animation: 0.28s;
}
p {
  line-height: 30px;
  height: 30px;
  margin: 0;
  text-align: center;
}
</style>

调用实现

刚好在上个手写Form表单组件中调用，链接如下
手写Form表单组件记录

导入弹窗组件和create创建函数

    login() {
      this.$refs.Xform.validate((isValid) => {
        if (isValid) {
          // alert("校验成功");
          create(Notice, {
            title: "登录",
            msg: "成功",
            duration: 5000,
          }).show();
        } else {
          // alert("校验失败");
          create(Notice, {
            title: "登录",
            msg: "校验失败",
            duration: 3000,
          }).show();
        }
      });
    },

成功！

作者：徐煜&煎包