3.0.1 • Published 3 years ago

hot-zone v3.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

React Hot zone

react 热区resize组件

Installation

npm install hot-zone --save

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import HotZoneWrap from 'hot-zone'
import img from './imgs/img.jpg'

class App extends React.Component {
  state = {
    coordinates: [],
  }

  changeCoordinate = (coordinate, index, coordinates) => {
    this.setState({
      coordinates,
    })
  }
  deleteCoordinate = (coordinate, index, coordinates) => {
    this.setState({
      coordinates,
    })
  }
  onDoubleClick = () => {
    console.log("双击事件")
  }
  render() {
    return
        <HotZoneWrap
          src={img}
          width={1000}
          coordinates={this.state.coordinates}
          onChange={this.changeCoordinate}
          onDelete={this.deleteCoordinate}
          onDoubleClick={this.onDoubleClick}
          hidden={false}
        />
      </div>
  }
}


ReactDOM.render(
  <div>
    <App />
  </div>,
  document.getElementById('root'),
)

Props

PropDescriptionTypeDefault
src图片链接string-
coordinates热区拖拽信息 {id, x, y, width, height, urlLink}.array[]
width图片宽度number(in pixel)-
clientWidth拖拽窗口宽度(默认 320) B端配置区number(in pixel)-
height图片高度number(in pixel)-
hidden热区是否显性展示bool
isMobile是否支持手机端 默认falsebool
onDraw创建新热区funtion(coordinate , index, coordinates)-
onDrag拖拽事件funtion(coordinate , index, coordinates)-
onResizeResize事件funtion(coordinate , index, coordinates)-
onChange热区变化事件funtion(coordinate , index, coordinates)-
onDelete热区删除事件funtion(coordinate , index, coordinates)-
onDoubleClick热区双击事件 (hiden为true时触发)onLoad(e)-

coordinate

PropDescriptionTypeDefault
ididstring-
xXnumber(in pixel)-
yYnumber(in pixel)-
widthWidthnumber(in pixel)-
heightHeightnumber(in pixel)-