大家可以百度或谷歌搜索 陈先生的小前端 ,来一起学习交流
npm install cs-ruler
在 main.js 中引入
import CsRuler from 'cs-ruler'
Vue.use(CsRuler)
在.vue文件中使用
<cs-ruler></cs-ruler>
注意
这里的组件名称为 cs-ruler,不能替换为其他的
如果想要在单个文件中引入,也可以的
在.vue中引入
import ruler from 'cs-ruler'
在components中注册组件
components: {
'cs-ruler': ruler.CsingRuler
}
之后就可以使用了
<cs-ruler></cs-ruler>
<cs-ruler @post-NumValue="rulerNum" :NowNum='100' :maxNum='2000' :minNum='0'></cs-ruler>
rulerNum 是一个函数,需要一个值去接收
methods: {
//子组件传递刻度表
rulerNum(value){
this.NumValue = value
},
},
新增可配置指针颜色
<cs-ruler :pointerColor="'red'"></cs-ruler>
新增配置字体大小
<cs-ruler :numSize='40'></cs-ruler>
字体颜色直接修改相应的class名即可,如果有需求想要配置可以提出
新增配置格数
可配置一页显示多少格,默认一页为40个小格,最低30个小格,数字为10的倍数,格数太低没有适配,有需求可以提出来
<cs-ruler :ruleWidth='40'></cs-ruler>
新增配置小数
可开启小数,整体除以10,默认不开启(最大值与最小值需要相应的变大10倍)
<cs-ruler ispoint></cs-ruler>
修改最大值无法选中..已修复
<cs-ruler @scroll-end="endEvent"></cs-ruler>
在方法中监听scroll-end传递的值,值为true,则滚动完成
methods: {
//子组件结束传值true
endEvent(val){
console.log(val)
}
},
<cs-ruler @scroll-start="startEvent"></cs-ruler>
在方法中监听scroll-start传递的值,值为true,则滚动完成
methods: {
startEvent(val){
console.log(val)
}
},
新增倍数字段oneGridValue,将整体的数值扩大,默认为1(最大值与最小值也会相应的扩大)
<cs-ruler :oneGridValue='1'></cs-ruler>
修复bug最小值设置的原因,导致初始值计算出错
喜欢的话欢迎到github上star并且提出自己的需求