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