文章预览
模态框是大多数 Web 应用程序中的基本构建块。虽然最初实现起来可能看起来有点棘手，但实际上，使用 Vue 和一些 Flexbox 技巧，这不仅可行，而且非常简单。 让我们一起实现一个基础的模态框组件。 架构如下： AppModal.vue ：基础组件，负责减少代码重复并保持整个应用程序的一致外观和感觉 *UseCase*Modal.vue ：每个用例都有一个专门的组件，负责指定模态框的内容和处理任何操作。 每个页面可以导入这些组件之一，并应处理其可见性。 基础模态框组件 要创建一个模态框，我们需要两个 div 和一些 CSS。 Content .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: 600 px; padding: spacing( 4 ); b
………………………………
