react-image-preview

• 基于 react17.x 开发的预览图片组件
• 支持 放大、缩小、复原、下载、打印、旋转、拖拽等功能
• 支持 png、jpg、jpge、bmp、gif 等常见图片格式
• 支持查看多个图片
• 开箱即用 只需传图片数据 轻便简单

安装使用说明

npm i react-dczs-image-preview

// 引入组件和样式
import { reactImagePreview } from 'react-dczs-image-preview'
import 'react-dczs-image-preview/lib/style.css'

例1：
var imgData = 'xxx'
export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      showBox: true
    }
  }
  close = () => {
    this.setState({
      showBox: false
    })
  }
  open = () => {
    this.setState({
      showBox: true
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.open}>open</button>
        <reactImagePreview
          showBox={this.state.showBox}
          imgData={imgData}
          close={this.close}
        />
      </div>
    )
  }
}

api

属性

| 属性值 | 类型 | 描述 | 默认值 | | ------------ | ------- | ------------------------------ | ------ | | imgData | string | 图片地址(url) | - | | imgArr | Array | 图片地址(数组) | - | | showBox | Boolean | 控制图片预览器显隐 | false | | customAction | Object | 自定义操作栏 | null | | isHint | Boolean | 是否展示提示(第一张或最后一张) | true | | ifWave | Boolean | 是否点击波纹特效 | false | | isAnimation | Boolean | 是否动画特效 | false |

customAction

| 属性值 | 类型 | 描述 | 默认值 | | ------------ | ------- | ------------------ | ------ | | lastCard | Boolean | 是否需要上一张 | true | | narrow | Boolean | 是否需要缩小 | true | | reduction | Boolean | 是否需要复原 | true | | enlarge | Boolean | 是否需要放大 | true | | leftRotate | Boolean | 是否需要逆时针旋转 | true | | rightRotate | Boolean | 是否需要顺时针旋转 | true | | downloadFile | Boolean | 是否需要下载 | true | | publish | Boolean | 是否需要打印 | true | | nextCard | Boolean | 是否需要下一张 | true | | mouseWheel | Boolean | 是否需要滚轮缩放 | true | | mouseDown | Boolean | 是否需要拖拽功能 | true |

事件

| 事件名 | 说明 | 回调参数 | | ------ | -------- | -------- | | close | 关闭回调 | - |

注意

• 若引用图片地址，相对地址使用 require()包裹或使用绝对地址
• 若 imgData 和 imgArr 同时传了 则只有 imgData 生效
• 不支持 base64