06 - Vue3 UI Framework - Dialog 元件

做完按鈕之後，我們應該了解了遮罩層的概念，接下來我們來做 <code>Dialog</code> 元件！ 傳回閱讀清單點選 這裡

預設是不可見的，在使用者觸發某個動作後變為可見

自帶白闆卡片，分為上中下三個區域，分别放置标題、内容、操作

有兩個基本操作：确定、取消

卡片後應放置淡黑色遮罩層，遮住原本網頁内容

可以自定義是否允許取消

右上角提供小叉叉來允許關閉

允許通過點選遮罩層來關閉

是以，我們能夠得出如下的參數表格

參數

含義

類型

可選值

預設值

visible

是否可見

boolean

false / true

false

title

标題

string

任意字元串

必填

ok

确定回調

()=&gt;boolean

傳回 boolean 的函數

()=&gt;true

cancel

取消回調

注意：可以通過設定傳回值為 <code>true</code> 來允許事件發生，反之不允許。可以通過設定傳回 <code>false</code> 來取消事件

我們複用之前做好的 <code>Button</code> 元件

一般情況下，我們不希望對話框彈窗在 <code>DOM</code> 樹上的位置，而希望是 <code>body</code> 的直接子元素，那麼我們可以使用 <code>vue3</code> 的 <code>teleport</code> 元件。

代碼如下：

這樣，在渲染時，<code>teleport</code> 内部的内容就會出現在 <code>body</code> 的子級上。

現在 <code>ts</code> 中聲明參數：

然後在 <code>export default</code> 中，寫入我們的參數：

再補全 <code>setup</code> 方法，此處選用 <code>Promise</code> 制造送出等待響應的感覺

最後再補全樣式表：

多數時候我們是不希望使用元件式的，而是直接用函數生成一個彈窗。那麼，我們隻要使用 <code>vue3</code> 提供的 <code>createApp</code> 和 <code>h</code> 函數就可以做到了。

我們再建立一個 <code>ts</code> 檔案，即 <code>createDialog.ts</code> ，代碼如下：

然後再需要使用的地方導入即可：

注意：該函數要求傳入一個 <code>options</code> 對象，該對象包含 <code>title, content, ok, cancel</code> 等 4 個部分，<code>content</code> 指代元件式中的插槽，其餘含義見需求分析

然後使用 <code>h</code> 函數渲染新 <code>app</code> 中的内容，并作為參數傳入 <code>createApp</code> 函數用以建立新的 <code>app</code>，最後挂載到 <code>DOM</code> 樹上。

接下來，我們将元件引入到頁面中，看一下實際運作效果

GitHub: https://github.com/JeremyWu917/jeremy-ui

JeremyUI: https://ui.jeremywu.top

感謝閱讀 ☕