0.1.0 • Published 5 years ago
canvas-slide-calculator v0.1.0
canvas-slide-calculator
仿蚂蚁财富app的滑动收益计算器
Demo
使用
install
npm i canvas-slide-calculator --save
import
import Calculator from "canvas-slide-calculator";
Simple Demo
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;
API
0.1.0
5 years ago