[Vue.js] 在 Vue 3 中使用 HTML dialog 標籤來實作對話框互動效果

在開發網頁應用時，我們經常需要向使用者顯示對話框或彈出窗口。Vue 3 提供了一個非常直觀的方式來整合和控制原生 HTML <dialog> 元素。以下是在 Vue 3 應用程式中整合和使用 HTML <dialog> 的基本步驟。

1. 加入 <dialog> 標籤

首先，在你的 Vue 組件的模板部分加入 <dialog> 標籤，這個標籤內可以放入你想顯示的內容，如標題或說明文字：

<template>
  <button @click="openDialog">打開對話框</button>
  <dialog ref="dialog">
    <h2>這是一個對話框</h2>
    <p>這裡可以放置一些重要內容。</p>
    <button @click="closeDialog">關閉</button>
  </dialog>
</template>

2. 使用 ref 屬性獲取元素引用

在 Vue 3 中，ref 屬性允許我們獲取 DOM 元素的引用。這讓我們可以直接操作這些元素，例如用程式來控制對話框的開啟或關閉：

import { ref } from 'vue';

const dialog = ref(null);

const openDialog = () => {
  dialog.value.showModal();  // 使用此方法來開啟對話框
  // 或者使用 dialog.value.show() 
};

const closeDialog = () => {
  dialog.value.close();
};

3. 設定對話框的開啟和關閉

我們定義了 openDialog 和 closeDialog 兩個方法來控制對話框的顯示和隱藏。這些方法將會在使用者點擊相應的按鈕時被觸發。

4. 自訂對話框的樣式

你可能想要為對話框添加一些自訂樣式，以符合你的應用程式的整體風格。這可以透過 CSS 完成：

dialog {
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

透過上述步驟，你可以在 Vue 3 應用程式中有效利用 HTML <dialog> 元素來創建具有互動性的對話框。這個方法不僅利用了現代網頁技術，而且提供了一個簡潔且易於維護的方式來增強用戶界面。