H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】vue自定义通用弹窗组件

弹窗组件我们很多时候会引用第三方组件,或者写的并不是很通用,只能在单独页面展示,下面我们来优雅的书写vue的自定义弹窗组件。

实现弹窗组件

弹窗这类组件的特点是它们在当前vue实例之外独立存在,不能写在当前业务dom内,这样样式不好控制,通用性比较差。

通常挂载于body,通过js动态生成和取消。这里就说明了一个知识点,要求我们对实例的创建和实例的挂载有一定的了解

下面我们来写个简单例子。

create函数
首先我们要有个明确思路该怎么做:

1、创建一个create函数。
2、传入一个组件的配置(组件显示本身和它的props参数)。
3、创建它的实例,并将其挂载到body上。
4、最后返回组件实例。

import Vue from 'vue'

// Component为传入的组件,props为传入的组件参数
export default function create(Component, props) {

  // 创建实例,每个vue项目的入口文件都会用到就不具体说明了
  // $mount()本质是把虚拟dom转化为真实dom,这点很重要
  const vm = new Vue({
    render(h) {
      return h(Component, { props })
    }
  }).$mount()

  // 通过vm.$el获取生成的dom,把生成的真实dom插入body中
  document.body.appendChild(vm.$el)

  // 获取根组件实例(这里不理解可以去看下前面的文章vue通讯大全)
  const comp = vm.$children[0]

  // 弹窗关闭时候调用
  comp.remove = () => {
    // 移除本身
    document.body.removeChild(vm.$el)
    // 释放自己所占资源
    vm.$destroy()
  }

  // 返回创建的实例
  return comp
}

看了上面代码,很多人会问出两个问题。

1.我们在初始化$mount绑定id为app的dom节点上,那么这里我们想绑定在body不是可以直接写成$mount(‘body’),这样就不用在用js去appendChild。
答案是不行,因为官网明确说明了这种方法是覆盖该dom内所有内容所以不行。但是$mount()本质是把虚拟dom转化为真实dom,这点很重要。

2.还有些同学会说出extend方式也可以创建组件实例并挂载
是的,下面我们就来实现一下。

import Vue from 'vue'

export default function create(Component, props) {
  // vue.extend()获取创建实例
  const Ctor = Vue.extend(Component)
  // 创建组件实例,这时得到的是虚拟dom,如何转化为真实dom
  const comp = new Ctor({
    propsData: props
  })
  // 前面说到$mount就是这个作用
  comp.$mount()

  // 挂在在body上,这时是comp的dom
  document.body.appendChild(comp.$el)

  comp.remove = () => {
    // 移除本身
    document.body.removeChild(comp.$el)
    // 释放自己所占资源
    comp.$destroy()
  }

  return comp
}

这样写起来是不是更轻便。

传入的显示组件

下面简单写下传入显示组件,也就是上文中的Component参数。这里就不赘述,比较简单。

<template>
  <div v-if="isShow">
    <h3>{{title}}</h3>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
// 上文中传入的props参数
  props: {
    title: {
      type: String,
      default: ""
    },
    message: {
      type: String,
      default: ""
    },
    duration: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      isShow: false
    };
  },
  methods: {
  // 调用show方法展示
    show() {
      this.isShow = true;
      // 使用setTimeout定时关闭
      setTimeout(this.hide, this.duration);
    },
    // 消失后移除自身所占资源
    hide() {
      this.isShow = false;
      this.remove();
    }
  }
};
</script>

调用弹窗组件

create()返回的是组件自身实例,调用show()方法自然会调用显示组件里面methods中的show方法,然后就成功了。

create(Notice, {
  title: '我是自定义弹窗组件',
  message: '我成功出现了',
  duration: 3000
}).show()

以上只是一个简单的弹窗通用封装,如果想了解的更深入可以参考element-ui的设计理念,去看看其中源码,相信还会有不少收获。
地址:https://github.com/ElemeFE/el…
组件都在packages里面,可以在这个文件夹里观看源码
image.png

本文地址:H5W3 » 【前端技术】vue自定义通用弹窗组件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址