Range 组件使用教程
优质
小牛编辑
141浏览
2023-12-01
安装
import { Range } from 'vux'
export default {
components: {
Range
}
}// 在入口文件全局引入
import Vue from 'vue'
import { Range } from 'vux'
Vue.component('range', Range)
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| value | number | 0 | 表单值，使用v-model绑定 | -- |
| decimal | boolean | false | 是否在变化时显示小数 | -- |
| min | number | 0 | 可选最小值 | -- |
| max | number | 100 | 可选最大值 | -- |
| step | number | 1 | 步长 | -- |
| disabled | boolean | false | 是否禁用 | -- |
| minHTML | string | 最小值显示的html模板 | -- | |
| maxHTML | string | 最大值显示的html模板 | -- | |
| disabled-opacity | number | 禁用样式的透明度 | -- | |
| rangeBarHeight | number | 1 | 高度 | -- |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-change | (value) | 绑定值变化时触发事件 | v2.2.2 |
| @on-touchstart | (event) | 手指放到元素上时触发 | v2.9.2 |
| @on-touchend | (event) | 手指离开元素时触发 | v2.9.2 |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @range-disabled-opacity | 0.5 | -- | @opacity-disabled |
| @range-bar-default-color | #a9acb1 | -- | |
| @range-bar-active-color | #04BE02 | -- | @theme-color |