仿蚂蚁财富app的滑动收益计算器
install
npm i canvas-slide-calculator --save
import
import Calculator from "canvas-slide-calculator";
import React, { Component } from 'react';
import Calculator from 'canvas-slide-calculator';
class App extends Component {
state = {
activeIndex: 0
}
componentDidMount() {
const self = this;
const arrData = [0, 10, 20, 30, 40, 50];
const options = {
width: window.innerWidth,
height: 100,
element: '#calculator',
data: arrData,
onSelect(data) {
self.setState({
activeIndex: data
})
}
}
const cal = new Calculator(options);
cal.render();
}
render() {
return (
<div className="App">
<div >{this.state.activeIndex}</div>
<canvas id="calculator"></canvas>
</div>
);
}
}
export default App;
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
width | number | null | canvas的宽度 |
height | number | null | canvas的高度 |
data | array | [] | 所传入需要展示数据的数组 |
element | string | "#id" |
需要绑定的dom元素 |
onSelect | (data) => {} |
null | 计算器当前所选中的数据回调函数 |