--- title: 模态框 date: 2023-05-28 16:17:38 permalink: /pages/component/modal article: false --- 1. `cu-modal` 和 `cu-dialog` 为模态框必选值，所有模态框的大体框架都是 `cu-modal` 包裹 `cu-dialog` 2. `cu-dialog` 内部填充操作部分和信息展示部分，操作部分可以用 `cu-bar` 操作条来布局，信息展示就直接写 3. 弹框的显示隐藏是通过添加或移除类名 `show` 来实现的，示例中隐藏弹框是绑定 `tap` 调用 `hideModal` 事件，`hideModal` 函数内执行的语句就是将变量 `modalName` 赋值为 `null`，从而移除类名 `show`，你想让用户点击哪里隐藏弹框，就可以把 `hideModal` 事件绑定在哪里（比如设置点击遮罩层隐藏弹框，就把 `hideModal` 事件绑定在有类名 `cu-modal` 的标签上） ## 普通窗口 1. 就是 `cu-modal` 包裹 `cu-dialog`，只做信息的展示，没有交互效果 ```html Modal标题 Modal 内容。 ``` ## 底部窗口 1. `cu-modal` 结合 `bottom-modal` 实现底部弹窗 ```html 确定 取消 Modal 内容。 ``` ## 对话窗口 1. 对话窗口相较于普通窗口底部多了一些用户交互的操作 ```html //示例一 Modal标题 Modal 内容。 //示例二 Modal标题 Modal 内容。 微信支付 取消 确定 ``` ## 图片窗口 1. `cu-dialog` 里放置图片，也可自定义 ```html 我知道了 ``` ## 单选窗口 1. 就是普通窗口内部结合 `radio` 标签编写的 ```html ``` ## 多选窗口 1. 配合 `grid` 布局自定义的 ```vue 取消 确定 ``` ## 侧边抽屉 1. `cu-modal` 结合 `drawer-modal`，由 `justify-start` 和 `justify-end`决定抽屉方向 ```html //左侧抽屉 Item {{index +1}} //右侧抽屉 Item {{index +1}} ``` ## 模态框相关class |class |说明 |可选值| |-- |-- |--| |cu-modal |模态框必选值 |——| |cu-dialog| 模态框子元素| ——| |bottom-modal |底部弹框| ——| |drawer-modal| 侧边弹框| ——| |show| 显示弹框| ——|