開篇
模態(tài)框（彈出層對話框，Modal Popup）在大多數(shù)現(xiàn)代應(yīng)用程序中非常常見。它們主要用于呈現(xiàn)簡潔的信息，非常適合顯示廣告和促銷內(nèi)容。模態(tài)框提供了一種快速傳達(dá)信息的方式，并提供了用戶友好的關(guān)閉選項(xiàng)。
在本文中，我們將使用Vuejs構(gòu)建一個彈出模態(tài)框。該模態(tài)框?qū)ㄒ粋€取消或關(guān)閉按鈕，以方便用戶在完成任務(wù)后關(guān)閉它。此外，我們還將實(shí)現(xiàn)一個功能，允許用戶在模態(tài)框區(qū)域外點(diǎn)擊以關(guān)閉它。
模態(tài)彈出組件
<script setup lang="ts">
import { ref } from 'vue';
const message = ref('This is a modal popup');
const emit = defineEmits(['close']);
const closeModal = () => {
emit('close');
};
</script>
<template>
<div class="popup" @click.self="closeModal">
<div class="popup-content">
<div class="popup-header">
<h2 class="popup-title">{{ message }}</h2>
<button class="popup-close-button" @click.prevent="closeModal">X</button>
</div>
<article>
<div class="popup-content-text">
This is a simple modal popup in Vue.js
</div>
</article>
</div>
</div>
</template>Script Section
<script setup lang="ts">
import { ref } from 'vue';
const message = ref('This is a modal popup');
const emit = defineEmits(['close']);
const closeModal = () => {
emit('close');
};
</script>在這個部分，我們從Vue中導(dǎo)入所需的功能。
ref?用于創(chuàng)建一個包含在模態(tài)框中顯示的響應(yīng)式變量消息。
emit用于定義一個名為“close”的事件，該事件可被觸發(fā)以關(guān)閉模態(tài)框。
closeModal是一個函數(shù)，當(dāng)調(diào)用時(shí)會觸發(fā)“close”事件，從而有效地關(guān)閉模態(tài)框。
Template Section
<template>
<div class="popup" @click.self="closeModal">
<div class="popup-content">
<div class="popup-header">
<h2 class="popup-title">{{ message }}</h2>
<button class="popup-close-button" @click.prevent="closeModal">X</button>
</div>
<article>
<div class="popup-content-text">
This is a simple modal popup in Vue.js
</div>
</article>
</div>
</div>
</template>本段代碼義了模板中模態(tài)框的結(jié)構(gòu)。
具有“popup”類的最外層div用作模態(tài)框的背景。
@click.self="closeModal"事件監(jiān)聽器附加到背景上，允許在其內(nèi)容之外點(diǎn)擊時(shí)關(guān)閉模態(tài)框。
內(nèi)容包括一個標(biāo)題（popup-title）和一個關(guān)閉按鈕（popup-close-button）。
在標(biāo)題下方，有一個文章部分，其中包含了模態(tài)框的主要內(nèi)容。
渲染模態(tài)框組件
<script setup lang="ts">
import { ref } from 'vue'
import Popup from "@/components/Popup.vue"; // @ is an alias to /src
const msg = ref('Hello World!')
const isOpened = ref(false)
</script>
<template>
<div>
<h1>{{ msg }}</h1>
<button @click="isOpened = !isOpened">Open Popup</button>
<Teleport to="body">
<Popup v-if="isOpened" @close="isOpened = !isOpened" />
</Teleport>
</div>
</template>數(shù)據(jù)和狀態(tài)管理：
代碼使用Vue的ref函數(shù)創(chuàng)建了兩個響應(yīng)式變量：
- msg: 初始設(shè)置為“Hello World!”的文本消息。
- isOpened: 這是一個布爾變量，初始值為false，表示彈出窗口是否打開或關(guān)閉。
按鈕點(diǎn)擊事件
模板中有一個帶有點(diǎn)擊事件監(jiān)聽器（@click）的<button>元素。當(dāng)按鈕被點(diǎn)擊時(shí)，它會切換isOpened變量的值，從而有效地打開或關(guān)閉彈出窗口。
導(dǎo)入彈出框組件
代碼導(dǎo)入了一個彈出組件（Popup.vue）。
在模板中，使用v-if條件渲染彈出窗口組件。只有當(dāng)isOpened變量為true時(shí)（v-if="isOpened"），彈出窗口才會顯示，表示彈出窗口應(yīng)該是打開的。
<Teleport>用于將彈出窗口組件移動到HTML文檔的<body>元素中。這樣可以確保彈出窗口在當(dāng)前組件的DOM層次結(jié)構(gòu)之外渲染，并且可以顯示在頁面上的其他內(nèi)容之上。
組件之間的通信：
當(dāng)需要關(guān)閉彈出組件時(shí)，Popup組件會觸發(fā)一個關(guān)閉事件@close。父組件使用@close事件監(jiān)聽器來監(jiān)聽此關(guān)閉事件。
當(dāng)Popup組件發(fā)出事件時(shí)，它切換isOpened變量，從而關(guān)閉彈出窗口。
您可以在CodeSandbox上使用本文中設(shè)計(jì)的代碼進(jìn)行在線體驗(yàn)。
https://codesandbox.io/s/suspicious-kepler-993dmh?file=%2Fsrc%2Fviews%2FHome.vue%3A0-420文章來源：http://www.zghlxwxcb.cn/news/detail-709590.html
結(jié)束
由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識，歡迎關(guān)注我，您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容，敬請期待。文章來源地址http://www.zghlxwxcb.cn/news/detail-709590.html
到了這里，關(guān)于如何在Vue.js中創(chuàng)建模態(tài)框(彈出框)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
