# cRange单滑块组件

# 使用教程

点击查看教程

# 使用文档

# 导入

main.js中:

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

# 调用

<cRange :min="0" :max="100" :step="5" v-model="0"></cRange>
1

# 属性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 拖拽松开后的触发事件

如:

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

# 插槽slot

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

如:

<cRange :min="0" :max="100" :step="5" @onChange="onChange" v-model="0">
  <div slot="left">0</div>
  <div slot="right">100</div>
</cRange>
1
2
3
4

# 特别提示

  1. 内部识别了touch和mouse事件,兼容移动端和PC端。
Last Updated: 12/12/2019, 7:37:32 PM

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