my-blog:https://tuimao233.gitee.io/ma...html
想必你们使用 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
虚拟节点能够理解成节点描述对象,它描述了应该怎样去建立真实的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 当中,瞬移组件有如下特色:
<teleport>
,所以他们能够从其祖先那里得到注入<teleport to="body"> <div id="content"> <p> this will be moved to #endofbody. <br />Pretend that it's a modal </p> </div> </teleport>