Vue3 优雅的模态框封装方案 - 初探

my-blog:https://tuimao233.gitee.io/ma...html

Vue3 优雅的模态框封装方法 - 初探vue

Vue3 优雅的模态框封装方法 - 实践node

想必你们使用 Vue 开发时,都有使用过 Element 或 Ant Design of Vue 的模态框git

例如 Ant Design of Vue 中的 a-message:app

<a-modal v-model="visible" title="Title" on-ok="handleOk">
    自定义内容
  </a-modal>

又或者直接在 js 代码中直接调起的 ElMessageBox:函数

import { ElMessageBox } from 'element-plus';

ElMessageBox.confirm('此操做将永久删除该文件, 是否继续?', '提示')
    .then(()=> {
    })
    .catch(()=> {
    })

例如在项目当中,有须要定义模态框调用的场景,就须要掌握自定义模态框的封装post

就比如如在一个后台管理系统中的一个图片选择器ui

ImageSelect({ multiple: true })
    .then((images)=> {
    
    })

又或者是使用组件库的模态框自定义样式功能,致使须要写全局类名覆盖组件模态框,复用率低下this

<!-- 组件 A -->
  <el-dialog custom-class="purchase-dialog">
    ...自定义内容...
  </el-dialog>
  <!-- 组件 B -->
  <el-dialog custom-class="purchase-dialog">
    ...自定义内容...
  </el-dialog>

可见要封装好一个模态框组件的重要性仍是很高的,那么整个大纲中会循环渐进的告诉你若是须要自定义封装一个又支持在 template 中使用,又支持在 js 代码中直接调用的对话框,以及如何利用组件库已有的模态框在不影响其复用性,扩展性的前提下进行二次封装。spa

本篇文章主要讲解要封装模态框以前要有所了解的一些技巧和 API

  • 虚拟节点建立 (create vnode)
  • 虚拟节点渲染 (render vnode)
  • Vue3 新增瞬移组件 (teleport)

虚拟节点建立 (create vnode)

虚拟节点能够理解成节点描述对象,它描述了应该怎样去建立真实的DOM节点。

利用 Vue3 默认导出的 h 函数,建立 vnode ,h 函数能够有多种传参方式:

import { h } from 'vue'
// 传入组件内容, 与组件 props 参数, 生成虚拟节点
const vnode = h(Component, props)

// 组件内容可为导入组件, 例如
import Component from './Component.vue'
const vnode = h(Component, props)
// 也可为 template 例如
const vnode = h('<div>hello world!!</div>', props)
// 也可为节点的描述数据 例如
const vnode = h('div', { id: 'app' }, [h('span', '我是 span')])

虚拟节点渲染 (render vnode)

利用 Vue3 默认导出的 render 函数,渲染至 document.body 当中:

import { h, render } from 'vue'
render(h('div', '我是一个 div'), container)

利用一个中间节点容器,卸载节点下全部 vnode:

import { h, render } from 'vue'
const container = document.createElement('div')
render(h('div', '我是一个 div'), container)
document.body.appendChild(container.firstElementChild)
// 销毁真实节点的全部实例 ( 卸载组件 )
// 这里不须要调用 document.body.removeChild(container.firstElementChild)
// 由于调用 render(null, container) 为咱们完成了这项工做
render(null, container)

Vue3 内置组件 - 瞬移组件 (Teleport)

瞬移组件须要传入 to 参数,表明挂载到对应真实 DOM 当中,瞬移组件有如下特色:

  • 该组件须要一个目标元素,该元素是经过须要一个HTMLElement或querySelector字符串的prop提供的
  • 组件将其子代移动到DOM选择器标识的元素
  • 虚拟DOM级别,子级仍然是子代的后代<teleport>,所以他们能够从其祖先那里得到注入
<teleport to="body">
    <div id="content">
      <p>
        this will be moved to #endofbody.
        <br />Pretend that it's a modal
      </p>
    </div>
  </teleport>