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

属性	类型	默认值	说明
width	number	null	canvas的宽度
height	number	null	canvas的高度
data	array	[]	所传入需要展示数据的数组
element	string	"#id"	需要绑定的dom元素
onSelect	(data) => {}	null	计算器当前所选中的数据回调函数