模态框

Modal

实验题目
模态框的设计与开发
实验目的

综合运用 Vue 框架知识点，设计并开发模态框

实验内容
介绍

模态框 Modal 是一种常见的网页交互组件，通常用于在当前页面上弹出一个对话框，要求用户进行某种操作或提供信息，在用户未完成操作前无法继续与页面其他部分交互

常用于提示、表单提交、警告、登录注册等场景

特点

覆盖在当前页面之上：通过 position: fixed 定位在视口的特定位置

阻止用户操作背景内容：通常会有一个半透明遮罩层 overlay 覆盖页面主体

需要主动关闭：用户可以通过点击确认、取消按钮或关闭图标来关闭模态框

实现

. 普通方法

. 自定义属性 defineProps()

. 自定义事件 defineEmits()

. 双向绑定 defineModel()

. 混合

需求分析
内容1 全覆盖模态框

模态框全覆盖视图

包括模态框背景、媒体内容；内容又包括标题、关闭按钮和其它展示的信息

单击背景或关闭按钮，关闭模态框

内容2 提示信息模态框

视口右上角显示

出现3秒后消失

根据不同的情况，显示不同的提示

可以手动关闭

参考效果和参考代码
内容1 全覆盖模态框
普通方法 v-if/v-show
自定义属性 defineProps()
自定义事件 defineEmits()
双向绑定 defineModel()
混合
内容2 提示信息模态框
第一阶段 静态模态框
模态框组件 - 创建模态框组件 Tips.vue

. 在视口右上角展示一条静态数据

父组件

. 引入模态框组件并条件渲染

. 使用响应式数据 isOpenModal 控制其显示和隐藏：真，则显示，否则隐藏/关闭

. 使用延时隐藏模态框组件；如何节流?

第二阶段 传递参数
根据不同的情况传递不同的提示信息
模态框组件 - 定义一个属性 tips，取代静态文本
父组件 - 声明数据并传递；同时在打开方法中传递数据给模态框组件属性 msg
第三阶段 过渡模态框

. 使用过渡组件包裹模态框 根元素 并指定 name 为 modal-fade，设计对应的 CSS 样式，实现淡入淡出过渡效果

拓展与思考
使用特定的字体图标，增加用户体验，如感叹号、警告等
手动关闭 - 增加关闭按钮，单击时，关闭模态框；关闭按钮定位在模态框右上角
增加动态标题 title，如针对密码修改、图片上传等场景的提示
指定位置 position：水平垂直居中、左上角、右上角、底部居中、顶部居中等等
侦听仓库的加载
其它设计
保存/推送项目到自己的代码仓库