示例查看 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 |