示例查看 http://qinwang.battlebanpick.com/preview
安装
yarn add @nuonuonuonuoyan/react-preview 或者 npm i @nuonuonuonuoyan/react-preview
import Preview from '@nuonuonuonuoyan/react-preview'
Params
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 图片标题 |
string | (active: Number) => ReactNode |
- |
| initActive | 默认展示第几张 | number |
0 |
| visible | 弹层是否可见 | boolean |
false |
| dataSource | 数据数组 | url[] |
[] |
| onShow | 弹层打开之后的回调 | () => void |
- |
| onClose | 点击右上角叉的回调 | () => void |
- |
| rootClass | 蒙层的类名 | string |
- |
| rootStyle | 设置蒙层的样式，调整透明度，宽度等 | CSSProperties |
- |
| wrapperClass | 外层容器的类名 | string |
- |
| wrapperStyle | 设置外层容器的样式 | CSSProperties |
- |
| headerClass | 弹层顶部操作栏的类型 | string |
- |
| headerStyle | 设置弹层顶部操作栏的样式 | CSSProperties |
- |
| headerHeight | 设置弹层顶部操作栏的高度，如果需要修改顶部操作栏的高度，可设置此属性，如“100px”，修改完毕底部的内容区域会自适应调整 | string |
- |
| contentClass | 图片展示区的类型 | string |
- |
| contentStyle | 设置图片展示区的样式 | CSSProperties |
- |
| hideOptionsText | 是否隐藏顶部操作栏的按钮文案 | boolean |
false |
| allowClickAway | 点击蒙层外的区域是否关闭弹层 | boolean |
true |