模態(tài)框是大多數(shù) Web 應(yīng)用程序中的基本構(gòu)建塊。雖然最初實(shí)現(xiàn)起來可能看起來有點(diǎn)棘手，但實(shí)際上，使用 Vue 和一些 Flexbox 技巧，這不僅可行，而且非常簡單。

讓我們一起實(shí)現(xiàn)一個(gè)基礎(chǔ)的模態(tài)框組件。

架構(gòu)如下：

• AppModal.vue：基礎(chǔ)組件，負(fù)責(zé)減少代碼重復(fù)并保持整個(gè)應(yīng)用程序的一致外觀和感覺

• *UseCase*Modal.vue：每個(gè)用例都有一個(gè)專門的組件，負(fù)責(zé)指定模態(tài)框的內(nèi)容和處理任何操作。

每個(gè)頁面可以導(dǎo)入這些組件之一，并應(yīng)處理其可見性。

基礎(chǔ)模態(tài)框組件

要?jiǎng)?chuàng)建一個(gè)模態(tài)框，我們需要兩個(gè) div 和一些 CSS。

<div class="modal"><div class="modal-content">Content</div>
</div>

.modal?{position:?fixed;left:?0;top:?0;right:?0;bottom:?0;z-index:?2;background-color:?$color-backdrop;display:?flex;align-items:?center;justify-content:?center;
}
.modal-content?{flex-basis:?600px;padding:?spacing(4);background-color:?$color-white;border-radius:?$border-radius;
}

外部元素具有固定位置，填充整個(gè)屏幕以創(chuàng)建背景效果。它還設(shè)置為 flex 并將內(nèi)容對(duì)齊在中間。內(nèi)部元素設(shè)置了最大寬度并根據(jù)我們的樣式指南進(jìn)行了一些樣式設(shè)置。在這里執(zhí)行樣式設(shè)置而不是在每個(gè)用例模態(tài)框中進(jìn)行設(shè)置，以減少代碼重復(fù)并保持整個(gè)應(yīng)用程序的相同 UI。