关于vue3:Vue3-优雅的模态框封装方案-初探

91次阅读

共计 1976 个字符，预计需要花费 5 分钟才能阅读完成。

my-blog：https://tuimao233.gitee.io/ma…

Vue3 优雅的模态框封装办法 – 初探

Vue3 优雅的模态框封装办法 – 实际

想必大家应用 Vue 开发时，都有应用过 Element 或 Ant Design of Vue 的模态框

例如 Ant Design of Vue 中的 a-message：

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

又或者间接在 js 代码中间接调起的 ElMessageBox：

import {ElMessageBox} from 'element-plus';

ElMessageBox.confirm('此操作将永恒删除该文件, 是否持续?', '提醒')
    .then(()=> {})
    .catch(()=> {})

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

就好比方在一个后盾管理系统中的一个图片选择器

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

又或者是应用组件库的模态框自定义款式性能，导致须要写全局类名笼罩组件模态框，复用率低下

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

可见要封装好一个模态框组件的重要性还是很高的，那么整个纲要中会循环渐进的通知你如果须要自定义封装一个又反对在 template 中应用，又反对在 js 代码中间接调用的对话框，以及如何利用组件库已有的模态框在不影响其复用性，扩展性的前提下进行二次封装。

本篇文章次要解说要封装模态框之前要有所理解的一些技巧和 API

虚构节点创立（create vnode）
虚构节点渲染（render vnode）
Vue3 新增瞬移组件（teleport）

虚构节点能够了解成节点形容对象，它形容了应该怎么去创立实在的 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')])

利用 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)

瞬移组件须要传入 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>

正文完