实现弹框组件

弹窗这类组件的特点是它们在当前vue实例之外独立存在，通常挂载于body；它们是通过JS动态创建的，不需要在任何组件中声明。

常见使用方法是：

this.$create(Notice, {
    
	title: '这是标题内容',
	message: '这是信息内容',
	duration: 1000
}).show();

使用render创建组件实例

import Vue from "vue";
function create(Component, props) {
    
  const vm = new Vue({
    
    render(h) {
    
      // render函数将传入组件配置对象转换为虚拟dom
      return h(Component, {
     props });
    }
  }).$mount(); //执行挂载函数，但未指定挂载目标，表示只执行初始化工作
  // 将生成dom元素追加至body
  document.body.appendChild(vm.$el);
  // 给组件实例添加销毁方法
  const comp = vm.$children[0];
  comp.remove = () => {
    
    document.body.removeChild(vm.$el);
    vm.$destroy();
  };
  return comp;
}
// 暴露调用接口
export default create;

使用Vue.extend方式创建组件实例

import Vue from "vue";
function create(Component, props) {
    
  const Ctor = Vue.extend(Component)
  const comp = new Ctor({
    propsData:props})
  comp.$mount()
  document.body.appendChild(comp.$el);
  comp.remove = () => {
    
    document.body.removeChild(comp.$el);
    comp.$destroy();
  };
  return comp;
}
export default create;

实现通知组件，Notice.vue

<template>
  <div class="box" v-if="isShow">
    <h3>{
   { title }}</h3>
    <p class="box-content">{
   { message }}</p>
  </div>
</template>
<script> export default {
       props: {
       title: {
       type: String, default: "", }, message: {
       type: String, default: "", }, duration: {
       type: Number, default: 1000, }, }, data() {
       return {
       isShow: false, }; }, methods: {
       show() {
       this.isShow = true; setTimeout(this.hide, this.duration); }, hide() {
       this.isShow = false; this.remove(); }, }, }; </script>
<style> .box {
       position: fixed; width: 100%; top: 16px; left: 0; text-align: center; pointer-events: none; background-color: #fff; border: grey 3px solid; box-sizing: border-box; } .box-content {
       width: 200px; margin: 10px auto; font-size: 14px; padding: 8px 16px; background: #fff; border-radius: 3px; margin-bottom: 8px; } </style>

使用测试

<script>
import create from "@/utils/create";
import Notice from "@/components/Notice";
export default {
    
  methods: {
    
    submitForm(form) {
    
      this.$refs[form].validate((valid) => {
    
	        const notice = create(Notice, {
    
		          title: "这是标题内容",
		          message: valid ? "请求登录!" : "校验失败!",
		          duration: 1000,
	        });
	        notice.show();
	  });
    },
  },
};
</script>