vue刻度尺组件

vue刻度尺组件

最近一个需求，做一个填写个人信息，填写身高和体重时需要用到刻度尺，就找到该组件的使用方法。

https://www.npmjs.com/package/cs-ruler?activeTab=readme

先看一下最后效果

1、安装依赖

npm install cs-ruler

2、在main.js中引入

import CsRuler from "cs-ruler";

Vue.use(CsRuler);

3、在vue文件中使用

<cs-ruler
  @post-NumValue="handleWeight" //改方法实时监听你改变刻度尺的值
   :NowNum="60" //当前的值
   :maxNum="300" //刻度尺最大值
   :minNum="0" //刻度尺最小值
   :numSize="30" //配置刻度值的字体大小
   :pointerColor="'#52D2CA'"  //指针颜色
   class="rules-msg"
 ></cs-ruler>


//在方法中
methods:{
	handleWeight(msg) {
		console.log(msg)//该值打印的就是你改变刻度尺的值
	}
}

以上就实现刻度尺的使用方法