slide ruler下载 - slide ruler源代码下载

slide ruler

三方组件

v1.2.2

下载

slideruler演示

中文读书我

特征

使用本机JavaScript开发，不依赖任何框架和库。
可自定义的颜色，尺寸，精度等。
支持惯性和反弹以刷仪表。
友好的API易于使用。

Proptypes

财产	类型	默认	描述
处理价值	功能		获取返回值
Canvaswidth	数字	屏幕宽度	统治者宽度
Canvasheight	数字	83	统治者高度
高度限制	数字	35	比例标记长度
高度挖掘	数字	18	分区标记长度
线宽	数字	2	标记宽度
Colordecimal	细绳	＃e4e4e4	比例标记颜色
Colordigit	细绳	＃e4e4e4	分区标记颜色
划分	数字	10	px的划分长度
精确	数字	1	分区值
字体大小	数字	20	比例字体
fontcolor	细绳	＃666666	比例fontcolor
Fontmargintop	数字	35	字体边距到顶部
MaxValue	数字	230	最大值
Minvalue	数字	100	最小值
电流值	数字	100	当前值

入门

安装

yarn add slide-ruler --dev

用法示例

本机JavaScript

 <!DOCTYPE html >
< html >
  < head >
    < meta charset =" UTF-8 " />
    < meta name =" author " content =" simbawu " />
    < title > Digital Keyboard </ title >
  </ head >
  < body >
    < div id =" values " > </ div >
    < div id =" app " > </ div >
    < script src =" ./slide-ruler.js " > </ script >
  </ body >
</ html >

 //slide-ruler.js
import SlideRuler from 'slide-ruler' ;

function handleValue ( value ) {
  console . log ( value ) ; //SlideRuler return value
  document . querySelector ( '#values' ) . innerHTML = value ;
}

new SlideRuler (
    {
        el : document . querySelector ( '#app' ) ,
        maxValue : 230 ,
        minValue : 100 ,
        currentValue : 180
        handleValue : handleValue ,
        precision : 1
    }
) ;

反应

 import React from 'react' ;
import SlideRuler from 'slide-ruler' ;

class SlideRulerPage extends React . Component {

  constructor ( ) {
    super ( ) ;

    this . handleValue = this . handleValue . bind ( this ) ;
    this . _renderSlideRuler = this . _renderSlideRuler . bind ( this ) ;
  }

  componentDidMount ( ) {
    this . _renderSlideRuler ( ) ;
  }

  handleValue ( value ) {
    console . log ( value ) ; //SlideRuler return value
  }

  _renderSlideRuler ( ) {
    return new SlideRuler (
      {
        el : this . refs . slideRuler ,
        maxValue : 230 ,
        minValue : 100 ,
        currentValue : 180
        handleValue : handleValue ,
        precision : 1
      }
    ) ;
  }

  render ( ) {
    return (
      < div ref = 'slideRuler' > </ div >
    )
  }
}

export default SlideRulerPage ;

Vue

 < template >
  < div > </ div >
</ template >
< script >
import SlideRuler from 'slide-ruler' ;
export default {
  mounted ( ) {
    this . _renderSlideRuler ( ) ;
  } ,
  methods : ( ) {
    _renderSlideRuler ( ) {
    	return new SlideRuler (
          {
            el : this . $el ,
            maxValue : 230 ,
            minValue : 100 ,
            currentValue : 180
            handleValue : handleValue ,
            precision : 1
          }
        ) ;
    } ,

    handleValue ( value ) {
      console . log ( value ) ; //SlideRuler return value
    }
  }
}
< / script>

角

 import { Component , ViewChild , OnInit , ViewEncapsulation } from '@angular/core' ;
import SlideRuler from 'slide-ruler' ;

@ Component ( {
  selector : 'my-app' ,
  template : `
   <div #slideRuler></div>
  ` ,
  encapsulation : ViewEncapsulation . None
} )
export class AppComponent  implements OnInit {

  @ ViewChild ( 'slideRuler' ) slideRuler ;

  ngOnInit ( ) {
    this . _renderSlideRuler ( ) ;
  }

  _renderSlideRuler ( ) {
    return new SlideRuler (
          {
            el : this . slideRuler . nativeElement ,
            maxValue : 230 ,
            minValue : 100 ,
            currentValue : 180
            handleValue : handleValue ,
            precision : 1
          }
        ) ;
  }

  handleValue ( value ) {
    console . log ( value ) ; //SlideRuler return value
  }
}