React Hot zone
react 熱區(qū)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
| Prop | Description | Type | Default |
|---|---|---|---|
| src | 圖片鏈接 | string | - |
| coordinates | 熱區(qū)拖拽信息 {id, x, y, width, height, urlLink}. | array | [] |
| width | 圖片寬度 | number(in pixel) | - |
| clientWidth | 拖拽窗口寬度（默認(rèn) 320） B端配置區(qū) | number(in pixel) | - |
| height | 圖片高度 | number(in pixel) | - |
| hidden | 熱區(qū)是否顯性展示 | bool | |
| isMobile | 是否支持手機(jī)端 默認(rèn)false | bool | |
| onDraw | 創(chuàng)建新熱區(qū) | funtion(coordinate , index, coordinates) | - |
| onDrag | 拖拽事件 | funtion(coordinate , index, coordinates) | - |
| onResize | Resize事件 | funtion(coordinate , index, coordinates) | - |
| onChange | 熱區(qū)變化事件 | funtion(coordinate , index, coordinates) | - |
| onDelete | 熱區(qū)刪除事件 | funtion(coordinate , index, coordinates) | - |
| onDoubleClick | 熱區(qū)雙擊事件 （hiden為true時(shí)觸發(fā)） | onLoad(e) | - |
coordinate
| Prop | Description | Type | Default |
|---|---|---|---|
| id | id | string | - |
| x | X | number(in pixel) | - |
| y | Y | number(in pixel) | - |
| width | Width | number(in pixel) | - |
| height | Height | number(in pixel) | - |
—— 人生終極非名利襟雷，千年流芳唯正氣捌浩。
