vue刻度尺组件
vue刻度尺组件刻度尺:参考文档:https://python.ctolib.com/328921371-ruler.htmlnpm install cs-ruler// 在 main.js 中引入import CsRuler from 'cs-ruler'Vue.use(CsRuler)// 在.vue文件中使用<cs-ruler @post-NumValue="rulerNum" :No
·
vue刻度尺组件
刻度尺:参考文档:https://python.ctolib.com/328921371-ruler.html
npm install cs-ruler
// 在 main.js 中引入
import CsRuler from 'cs-ruler'
Vue.use(CsRuler)
// 在.vue文件中使用
<cs-ruler @post-NumValue="rulerNum" :NowNum='100' :maxNum='2000' :minNum='0'></cs-ruler>
rulerNum 是一个函数,需要一个值去接收
methods: { //子组件传递刻度表 rulerNum(value){ this.NumValue = value }, },
使用@post-NumValue来
接收滚动的值
NowNum为
初始值
,默认为100,可不传maxNum为刻度尺的
最大值
,默认为1000,可不传minNum为刻度的
最小值
,默认为0,可不传新增
倍数字段oneGridValue
,将整体的数值扩大,默认为1(最大值与最小值也会相应的扩大)<cs-ruler :oneGridValue='1'></cs-ruler>
新增可配置
指针颜色
<cs-ruler :pointerColor="'red'"></cs-ruler>
可配置
小数
:可开启小数,整体除以10,默认不开启(最大值与最小值需要相应的变大10倍)<cs-ruler ispoint></cs-ruler>
可配置一页
显示多少格
,默认一页为40个小格,最低30个小格,数字为10的倍数<cs-ruler :ruleWidth='40'></cs-ruler>
配置
字体大小
以及刻度值的显示<cs-ruler :numSize='40'></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) } },
更多推荐
已为社区贡献9条内容
所有评论(0)