Modal 组件
介绍
提供一个简单的 Modal 框,用于展示弹窗内容。
用法
基本引入
// 1. 引入
import { FQModal } from "@fq/fq-weapp-ui";
组件依赖的样式文件(仅按需引用时需要)
import "@fq/fq-weapp-ui/dist/styles/components/modal.scss";
基础用法
<FQModal visible>
<View className='modal-container'>
xxx
</View>
</FQModal>
API
属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| visible | 是否显示模态框 | boolean | - | - |
| canCloseByMask | 点击蒙层是否允许关闭 | boolean | - | false |
| unCoverNavBar | 是否覆盖导航栏 | boolean | - | false |
| innerClassName | 内部容器类名 | string | - | - |
| className | 模态框样式类名 | string | - | - |
| maskClassName | 蒙层样式类名 | string | - | - |
| style | 模态框样式 | React.CSSProperties | - | - |
| childrenStyle | 模态框内容样式 | React.CSSProperties | - | - |
| addTop | 顶部偏移量 | number | - | 0 |
| catchMove | 是否阻止滑动穿透 | boolean | - | false |
| noRendering | 是否执行预渲染,用于提前渲染模态框内部的内容 | boolean | - | false |
方法
| 函数名 | 说明 | 参数 |
|---|---|---|
| onClose | 模态框关闭事件 | - |