react-dark-photo
1.0.28 • Public • Published
先上效果图
演示地址(vue版和react版一样)
https://dark2017.github.io/vue-dark-photo.github.io/
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 |
事件
注意
- 若引用图片地址,相对地址使用require()包裹或使用绝对地址
- 若imgData 和 imgArr 同时传了 则只有imgData生效
- 不支持 base64
最后
Readme
Keywords
nonePackage Sidebar
Install
Weekly Downloads