VUE3（二十五）自定义Modal对话框组件-白红宇

VUE3（二十五）自定义Modal对话框组件

阅读量：395 次

发布时间：2019-03-05

本文共 1756 字，大约阅读时间需要 5 分钟。

在组件开发中，常需要自定义模态框组件来与用户进行信息交互。本文将详细介绍一个基于Vue.js的Modal组件实现，包括其功能、样式以及使用案例。

Modal组件实现

该Modal组件采用在Vue.js项目中的标准实践，通过组件化方式实现高效的UI交互。组件主要包含以下几个关键部分：

组件结构

模态背景层：用于覆盖全屏，形成模态框的背景。

模态框主体：包含标题、内容区域和操作按钮。

标题栏：显示模态框的标题，支持动态设置。

内容区域：提供插槽支持，允许用户自定义内容。

脚部区域：通常包含确认和关闭按钮，用户可以根据需求自定义。

样式实现

背景层风格：采用半透明背景，支持点击遮挡。

框架样式：使用Flex布局，确保模态框在屏幕中心对齐。

样式可配置：通过SCSS文件，允许用户自定义颜色、大小和其他可视样式属性。

交互逻辑

模态显示与隐藏：通过props属性控制显示状态。

确认与取消操作：定义回调函数，允许父组件处理点击事件。

插槽支持：通过slot插槽机制，方便用户自定义内容。

样式代码示例

.modal-backdrop {    position: fixed;    top: 0;    right: 0;    bottom: 0;    left: 0;    background-color: rgba(0,0,0,.3);    display: flex;    justify-content: center;    align-items: center;    z-index: 20;}.modal {    background-color: #fff;    box-shadow: 2px 2px 20px 1px;    overflow-x: auto;    display: flex;    flex-direction: column;    border-radius: 16px;    width: 700px;}.modal-header {    border-bottom: 1px solid #eee;    color: #313131;    justify-content: space-between;    padding-left: 15px;    display: flex;}.modal-footer {    border-top: 1px solid #eee;    justify-content: flex-end;    padding: 15px;    display: flex;}.modal-body {    position: relative;    padding: 20px 10px;}.btn-close, .btn-confirm {    border-radius: 8px;    margin-left: 16px;    width: 56px;    height: 36px;    border: none;    cursor: pointer;}.btn-close {    color: #313131;    background-color: transparent;}.btn-confirm {    color: #fff;    background-color: #2d8cf0;}