Vue3 優雅的模態框封裝方案 - 初探

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）

虛擬節點建立 （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>