ruler组件

分享一个ruler组件，之前看支付宝上有相关功能，之后由于工作需要自己也重新写了一个，先看看实现的效果图吧

安装方法

    npm i lr-ruler

使用方法

<template>
  <div id="app">
      <lr-ruler
        @post-NumValue="handleWeight" 
        :NowNum="60" 
        :maxNum="80" 
        :minNum="20" 
        :ruleWidth="30"
        :pointerColor="'#52D2CA'" 
        class="rules-msg"
      ></lr-ruler>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleWeight() {
      // console.log(msg)//该值打印的就是你改变刻度尺的值
    }
  }
}
</script>

相关配置参数

参数	说明	类型	默认值
NowNum	初始值	Number	100
maxNum	最大刻度	Number	100
minNum	最小刻度	Number	0
pointerColor	指针颜色	String	rgb(97,206,81)
ruleWidth	刻度尺有多细（可视区一共展示多少个刻度）	Number	30
ispoint	是否启用小数	Number	100
oneGridValue	每个格子多大	Number	1
typeName	展示文字（传参即展示）	String
graduation	刻度分度（默认5格为一大格）	Number	5
rulerHeight	ruler的高度	String/Number	120
colorRange	文字变色范围	String/Number	10

有兴趣的童鞋欢迎github上star一下 github.com/lafiterao/l…