bee-viewer
react bee-viewer component for tinper-bee
some description...
依赖
- react >= 15.3.0
- react-dom >= 15.3.0
- prop-types >= 15.6.0
使用方法
import React, { Component } from 'react';
import Viewer from '../../src'
class Demo1 extends Component {
shown=(e)=>{
console.log(e,'shwon')
}
hidden=(e)=>{
console.log(e,'hidden')
}
render () {
return (
<Viewer shown={this.shown} hidden={this.hidden}>
<img id="image" src='http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg' alt="Picture"/>
</Viewer>
)
}
}
export default Demo1
API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| asyncLoad | 图片是否异步加载 | bool | false |
| inline | 启用 inline 模式 | bool | false |
| button | 显示右上角关闭按钮 | bool | true |
| navbar | 显示缩略图导航 | bool | true |
| title | 显示当前图片的alt属性及图片尺寸 | bool | true |
| toolbar | 显示工具栏 | bool | true |
| tooltip | 显示缩放百分比 | bool | true |
| movable | 图片是否可移动 | bool | true |
| zoomable | 图片是否可缩放 | bool | true |
| rotatable | 图片是否可旋转 | bool | true |
| scalable | 图片是否可翻转 | bool | true |
| transition | 使用 CSS3 过度 | bool | true |
| fullscreen | 播放时是否全屏 | bool | true |
| keyboard | 是否支持键盘 | bool | true |
| interval | 播放间隔，单位为毫秒 | number | 5000 |
| zoomRatio | 鼠标滚动时的缩放比例 | number | 0.1 |
| minZoomRatio | 最小缩放比例 | number | 0.01 |
| maxZoomRatio | 最大缩放比例 | number | 100 |
| zIndex | 设置图片查看器 modal 模式时的 z-index | number | 2015 |
| zIndexInline | 设置图片查看器 inline 模式时的 z-index | number | 0 |
| container | 设置图片查看器 modal 模式的容器，inline 模式无效 | element | body |
| shown | 图片查看器显示后的回调 | func | ()=>{} |
| hidden | 图片查看器关闭后的回调 | func | ()=>{} |
开发调试
$ npm install -g bee-tools$ git clone https://github.com/tinper-bee/bee-viewer$ cd bee-viewer$ npm install$ npm run dev