react-wheelsurf v1.0.0

react-wheelsurf

属性与事件

使用方法

import Wheelsurf from 'react-wheelsurf'

// 图片链接需为网络链接
const innerStyle = { backgroundImage: 'url(pan.png)' }
const pointerStyle = { backgroundImage: 'url(pointer.png)' }

class App extends React.Component {
  _onStart (rotate) {
    console.log('准备开始转啦啦啦')
    const deg = 360 * 2 + 120
    const dur = 6
    rotate(deg, dur)
  }
  _onFinish () {
    console.log('转盘结束啦啦啦')
  }
  render () {
    return (
      <div className={style.dial}>
        <Wheelsurf
          lock={false}
          innerStyle={innerStyle}
          pointerStyle={pointerStyle}
          onStart={this._onStart}
          onFinish={this._onFinish}
        />
      </div>
    )
  }
}

转盘样式也可以通过样式覆盖，不过比较推荐第一种方法

:global(.cjx-outTable){
  background-image: url(../images/outer.png);
}
:global(.cjx-innerTable){
  background-image: url(../images/inner.png);
}
:global(.cjx-pointer){
  background-image: url(../images/pointer.png);
}