# cRangeDouble双滑块组件

# 使用教程

点击查看教程

# 使用文档

# 导入

main.js中:

import { cRangeDouble } from 'cpm-ui'
Vue.use(cRangeDouble)
1
2

# 调用

<cRangeDouble :min="0" :max="100" :step="5" v-model="value"></cRangeDouble>

{
  value: [0, 100]
}
1
2
3
4
5

# 属性props

参数 说明 类型 可选值 默认值
value 当前值,v-model双向绑定 Number 0
min 最小阙值 Number 0
max 最大阙值 Number 100
step 步长 Number 1
disabled 是否禁用 Boolean truefalse false
showValue 是否显示滑块上方当前值 Boolean truefalse false
calibrateList 刻度值list,可设置无规律 Array []

# 事件Event

方法 说明
onChange 拖拽松开后的触发事件

如:

<cRangeDouble :min="0" :max="100" :step="5" @onChange="onChange" v-model="value"></cRangeDouble>

{
  value: [0, 100]
}
1
2
3
4
5

# 插槽slot

name 说明
left 拖拽左侧
right 拖拽右侧

如:

<cRangeDouble :min="0" :max="100" :step="5" @onChange="onChange" v-model="value">
  <div slot="left">0</div>
  <div slot="right">100</div>
</cRangeDouble>

{
  value: [0, 100]
}
1
2
3
4
5
6
7
8

# 特别提示

  1. 内部识别了touch和mouse事件,兼容移动端和PC端。
  2. 对于双滑块而言,我处理了最小范围为一个步长,所以当步长设置太小时,滑块会碰撞在一起。合理来说,我们应该设置一个合适的步长,避免发生碰撞。
Last Updated: 12/12/2019, 7:37:32 PM

注:因PC端浏览存在最小12px字号的原因,部分视图下文字会显示比较大,手机端访问正常。