/react-dark-photo

react-dark-photo一款基于react17.x开发的图片预览组件，支持放大、缩小、下载、打印等功能。

Primary LanguageJavaScriptMIT LicenseMIT

先上效果图

demo1.gif

demo2 .gif

demo3.gif

演示地址（vue版和react版一样）

https://dark2017.github.io/vue-dark-photo.github.io/

react-dark-photo

安装使用说明

react-dark-photo

npm i react-dark-photo

// 引入组件和样式
import { ReactDarkPhoto } from 'react-dark-photo'
import 'react-dark-photo/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>
        <ReactDarkPhoto 
          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生效

最后