rdp

react-dark-photo

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

Showing:

Popularity

Downloads/wk

22

GitHub Stars

6

Maintenance

Last Commit

2mos ago

Contributors

2

Package

Dependencies

3

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

先上效果图

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'1var 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

属性

属性值类型描述默认值
imgDatastring图片地址(url)-
imgArrArray图片地址(数组)-
showBoxBoolean控制图片预览器显隐false
customActionObject自定义操作栏null
isHintBoolean是否展示提示(第一张或最后一张)true
ifWaveBoolean是否点击波纹特效false
isAnimationBoolean是否动画特效false

customAction

属性值类型描述默认值
lastCardBoolean是否需要上一张true
narrowBoolean是否需要缩小true
reductionBoolean是否需要复原true
enlargeBoolean是否需要放大true
leftRotateBoolean是否需要逆时针旋转true
rightRotateBoolean是否需要顺时针旋转true
downloadFileBoolean是否需要下载true
publishBoolean是否需要打印true
nextCardBoolean是否需要下一张true
mouseWheelBoolean是否需要滚轮缩放true
mouseDownBoolean是否需要拖拽功能true

事件

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

注意

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

最后

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100