Let’s start with the renderings

Demo address (same as react version)

Dark2017. Making. IO/vue – dark – ph…

react-dark-photo

  • A preview picture component based on React17.x
  • Support zoom in, zoom out, restore, download, print, rotate, drag and drop functions
  • Supports common image formats such as PNG, JPG, JPGE, BMP, and GIF
  • Support to view multiple images
  • Out of the box just need to transfer picture data light and simple
  • GitHub address: github.com/Dark2017/re…
  • Vue: github.com/Dark2017/vu…
  • Vue same nuggets: juejin.cn/post/696206…

Installation instructions

NPM I react-dark-photo import {ReactDarkPhoto} from 'react-dark-photo' import 'the react - dark - photo/lib/style.css. CSS' case 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> ) } }Copy the code

api

attribute

Attribute values type describe The default value
imgData string Image Address (URL) –
imgArr Array Image address (array) –
showBox Boolean Control image preview display and fade false
customAction Object Custom action bar null
isHint Boolean Whether to show hints (first or last) true
ifWave Boolean Whether to click ripple effect false
isAnimation Boolean Animation effects or not false

customAction

Attribute values type describe The default value
lastCard Boolean Do I need a last one true
narrow Boolean Does it need to be shrunk? true
reduction Boolean Whether recovery is required true
enlarge Boolean Does it need to be enlarged? true
leftRotate Boolean Whether you need to rotate counterclockwise true
rightRotate Boolean Whether to rotate clockwise true
downloadFile Boolean Whether to download true
publish Boolean Do I need to print it? true
nextCard Boolean Do I need another one true
mouseWheel Boolean Whether scroll wheel scaling is required true
mouseDown Boolean Whether drag and drop is required true

The event

The event name instructions The callback parameter
close Close the callback –

Pay attention to

  • For reference to picture addresses, use require() for relative addresses or use absolute addresses
  • If imgData and imgArr are transmitted at the same time, only imgData takes effect

The last

  • If it is helpful to you, please star a oh, your encouragement is the power of my creation
  • Welcome to my blog, I hope you can help
  • The Denver nuggets: juejin. Cn/user / 233939…
  • Csdn:blog.csdn.net/weixin_4408…
  • CSDN Denver | | zhihu name: cookies _ or cookies