当前位置: 首页 > 文档资料 > VUX 中文文档 >

Range 组件使用教程

优质
小牛编辑
136浏览
2023-12-01

安装

import { Range } from 'vux'

export default {
  components: {
    Range
  }
}
// 在入口文件全局引入

import Vue from 'vue'
import { Range } from 'vux'

Vue.component('range', Range)

属性

名字类型默认值说明版本要求
valuenumber0表单值,使用v-model绑定--
decimalbooleanfalse是否在变化时显示小数--
minnumber0可选最小值--
maxnumber100可选最大值--
stepnumber1步长--
disabledbooleanfalse是否禁用--
minHTMLstring最小值显示的html模板--
maxHTMLstring最大值显示的html模板--
disabled-opacitynumber禁用样式的透明度--
rangeBarHeightnumber1高度--

事件

名字参数说明版本要求
@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