阅读 428

基于react的简单轻便的开源图片预览组件

先上效果图

demo1.gif

demo2 .gif

demo3.gif

演示地址(vue版和react版一样)

dark2017.github.io/vue-dark-ph…

react-dark-photo

  • 基于 react17.x 开发的预览图片组件
  • 支持 放大、缩小、复原、下载、打印、旋转、拖拽等功能
  • 支持png、jpg、jpge、bmp、gif等常见图片格式
  • 支持查看多个图片
  • 开箱即用 只需传图片数据 轻便简单
  • GitHub地址:github.com/Dark2017/re…
  • vue同款:github.com/Dark2017/vu…
  • vue同款掘金:juejin.cn/post/696206…

安装使用说明

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

属性

属性值类型描述默认值
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生效

最后

文章分类
前端
文章标签