Range 组件使用教程
优质
小牛编辑
137浏览
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 |