npm package: @nuonuonuonuoyan/react-preview
Description: 预览图
Author: yaso
Latest version: 1.0.69

[示例查看 http://qinwang.battlebanpick.com/preview](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   |