手写vue弹窗组件

2021-12-01 18:03:25 阅读：196 来源： 互联网

标签：body vue title create vm 实例组件手写弹窗

弹窗类组件特点

一般独立于当前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();
        }
      });
    },

成功！
在这里插入图片描述

作者：徐煜&煎包

标签：body,vue,title,create,vm,实例,组件,手写,弹窗
来源： https://blog.csdn.net/weixin_45888701/article/details/121635752

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

手写vue弹窗组件

弹窗类组件特点

首先创建create函数js文件

notice弹窗组件

调用实现