modal是UI/UX設計中，指的是一種會阻止用戶與其他界面交互的視窗，叫做模態視窗（或者叫做模態對話框），用途是聚焦內容！可以好好提供特定資訊這樣～
這個應該不難吧～ 來實做看看吧！
App.vue
<!--
Modal component with customizable slots and CSS transitions.
-->
<script setup>
import Modal from './Modal.vue'
import { ref } from 'vue'
const showModal = ref(false)
</script>
<template>
<p>Example 6:</p>
<button id="show-modal" @click="showModal = true">Show Modal</button>
<Teleport to="body">
<!-- use the modal component, pass in the prop -->
<modal :show="showModal" @close="showModal = false">
<template #header>
<h3>Custom Header</h3>
</template>
</modal>
</Teleport>
</template>
<script setup>
import Modal from './Modal.vue'：引入一個模態對話框組件。import { ref } from 'vue'：從Vue庫中引入ref函數，用來創建一個響應式的變數。const showModal = ref(false)：創建一個響應式變數showModal，初始值為false，用來控制模態對話框的顯示與否。
<template>
<button id="show-modal" @click="showModal = true">Show Modal</button>：一個按鈕，當點擊時會將showModal設置為true，從而顯示模態對話框。
<Teleport to="body">
<!-- use the modal component, pass in the prop -->
<modal :show="showModal" @close="showModal = false">
<template #header>
<h3>Custom Header</h3>
</template>
</modal>
</Teleport>
<Teleport to="body">：Teleport組件用來將其子組件渲染到body元素中，而不是其原本的位置。<!-- use the modal component, pass in the prop -->：這是一個註解，說明使用模態對話框組件並傳入屬性。<modal :show="showModal" @close="showModal = false">：這行代碼用來顯示模態對話框，並將showModal作為show屬性傳入，同時監聽close事件，當模態對話框發出close事件時，將showModal設置為false，隱藏模態對話框。<template #header>：這行代碼用來定義模態對話框的header插槽。<h3>Custom Header</h3>：一個自定義的標題，作為模態對話框的header插槽內容。
通過這段代碼，當點擊「Show Modal」按鈕時，模態對話框會顯示，並且可以自定義模態對話框的標題內容。
Q: Teleport哪來的？
Teleport 是 Vue 3 中的一個內建組件，用來將子組件或元素渲染到指定的 DOM 節點，而不是渲染在其父組件的 DOM 節點中。這在某些情況下非常有用，比如需要將模態對話框、提示框等元素渲染到 body 標籤下，以避免層級問題。
Teleport 組件，它是 Vue 的一部分，可以直接使用。Teleport 簡介
Teleport 是 Vue 3 的一個特性，用來將元素渲染到指定的 DOM 節點，而不是其原本所在的位置。這對於模態對話框、通知和提示框等需要在頁面上高層級顯示的元素非常有用。
Modal.vue
<script setup>
const props = defineProps({
show: Boolean
})
</script>
<template>
<Transition name="modal">
<div v-if="show" class="modal-mask">
<div class="modal-container">
<div class="modal-header">
<slot name="header">default header</slot>
</div>
<div class="modal-body">
<slot name="body">default body</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">OK</button>
</slot>
</div>
</div>
</div>
</Transition>
</template>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
transition: opacity 0.3s ease;
}
.modal-container {
width: 300px;
margin: auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter-from {
opacity: 0;
}
.modal-leave-to {
opacity: 0;
}
.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
<script setup>
<script setup>
const props = defineProps({
show: Boolean
})
</script>
script setup：這是 Vue 3 中一個簡化的腳本語法，專為組件設置而設計。defineProps：用來定義從父組件傳入的props。show：定義了一個布林值的prop，用來控制模態對話框是否顯示。
<template>
<template>
<Transition name="modal">
<div v-if="show" class="modal-mask">
<div class="modal-container">
<div class="modal-header">
<slot name="header">default header</slot>
</div>
<div class="modal-body">
<slot name="body">default body</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">OK</button>
</slot>
</div>
</div>
</div>
</Transition>
</template>
<Transition name="modal">：使用 Vue 的Transition組件來為模態對話框的顯示和隱藏添加過渡效果，過渡的名稱為modal。v-if="show"：只有在show為true時才會渲染這個div，即模態對話框。class="modal-mask"：遮罩層的 CSS 類，用於覆蓋整個頁面。class="modal-container"：模態對話框的容器 CSS 類。<slot name="header">default header</slot>：插槽，用於讓父組件提供自定義的標頭內容。如果父組件沒有提供，則顯示默認內容default header。<slot name="body">default body</slot>：插槽，用於讓父組件提供自定義的主體內容。如果父組件沒有提供，則顯示默認內容default body。<slot name="footer">：插槽，用於讓父組件提供自定義的頁腳內容。如果父組件沒有提供，則顯示默認內容，包括一個關閉按鈕。@click="$emit('close')"：當按鈕被點擊時，觸發一個名為close的自定義事件，以通知父組件關閉模態對話框。
Ｑ: Transition哪來的？
Transition 是 Vue 內建的組件之一，用於應用過渡效果到元素的進出過程中。當你在模板中使用 <Transition> 標籤時，它會自動應用指定的 CSS 過渡效果到包裹的元素上。
在範例中，Transition 用於模態對話框的進出過程中，使其顯示和隱藏更具動畫效果。以下是更詳細的解釋：
Transition 的來源
在 Vue 3 中，Transition 是一個全局組件，這意味著你不需要顯式地導入它就可以直接使用。它內建在 Vue 的核心庫中，因此可以直接在模板中引用。
<style>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
transition: opacity 0.3s ease;
}
.modal-container {
width: 300px;
margin: auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
.modal-enter-from {
opacity: 0;
}
.modal-leave-to {
opacity: 0;
}
.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
.modal-mask：定義了模態對話框的遮罩層樣式，使其覆蓋整個頁面，並且具有半透明的黑色背景。.modal-container：定義了模態對話框的容器樣式，包括寬度、邊距、填充、背景色、邊框圓角和陰影。.modal-header h3：定義了模態對話框標頭的樣式，包括顏色和頂部邊距。.modal-body：定義了模態對話框主體的樣式，包括邊距。.modal-default-button：定義了默認按鈕的樣式，使其浮動到右側。.modal-enter-from和.modal-leave-to：定義了模態對話框顯示和隱藏時的過渡效果，包括透明度和縮放效果。
這段代碼創建了一個模態對話框組件，使用插槽讓父組件能夠自定義標頭、主體和頁腳內容，並且使用過渡效果使顯示和隱藏更加平滑。
這個範例雖然很短，但是蠻多細節的～
要自己重頭寫一個類似的～不知道寫得出來嗎？www ~
對話框
