Element UI Slider 是 Element UI 中的一个组件,它可以用来控制和显示数值范围。它可以用来控制音量、亮度、温度等,也可以用来表示进度。
Element UI Slider 的使用非常简单,只需要在 HTML 中引入 Element UI 的文件,然后在 Vue 组件中使用即可。
<template> <el-slider v-model="value"></el-slider> </template> <script> export default { data() { return { value: 0 } } } </script>
Element UI Slider 支持多种属性,例如 min、max 和 step 等,这些属性可以让我们更好地控制滑动条的行为。
<el-slider v-model="value" :min="0" :max="100" :step="10" show-stops />
此外,Element UI Slider 还支持自定义样式,我们可以通过设置 backgroundColor 和 height 等属性来调整样式。
<el-slider v-model="value" backgroundColor="#ff0000" height="20px" />
最后,Element UI Slider 还有一些其它的功能,例如 tooltip、inputNumber 和 range 等。我们可以根据需要使用这些功能来实现不同的效果。
通过拖动滑块在一个固定区间内进行选择
在拖动滑块时,显示当前值
通过设置绑定值自定义滑块的初始值
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-slider v-model="value1"></el-slider>
</div>
<div class="block">
<span class="demonstration">自定义初始值</span>
<el-slider v-model="value2"></el-slider>
</div>
<div class="block">
<span class="demonstration">隐藏 Tooltip</span>
<el-slider v-model="value3" :show-tooltip="false"></el-slider>
</div>
<div class="block">
<span class="demonstration">格式化 Tooltip</span>
<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
</div>
<div class="block">
<span class="demonstration">禁用</span>
<el-slider v-model="value5" disabled></el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value1: 0,
value2: 50,
value3: 36,
value4: 48,
value5: 42,
}
},
methods: {
formatTooltip(val) {
return val / 100
},
},
}
</script>
选项可以是离散的
改变step的值可以改变步长,通过设置show-stops属性可以显示间断点
<template>
<div class="block">
<span class="demonstration">不显示间断点</span>
<el-slider v-model="value1" :step="10"> </el-slider>
</div>
<div class="block">
<span class="demonstration">显示间断点</span>
<el-slider v-model="value2" :step="10" show-stops> </el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value1: 0,
value2: 0,
}
},
}
</script>
通过输入框设置精确数值
设置show-input属性会在右侧显示一个输入框
<template>
<div class="block">
<el-slider v-model="value" show-input> </el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value: 0,
}
},
}
</script>
支持选择某一数值范围
设置range即可开启范围选择,此时绑定值是一个数组,其元素分别为最小边界值和最大边界值
<template>
<div class="block">
<el-slider v-model="value" range show-stops :max="10"> </el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value: [4, 8],
}
},
}
</script>
设置vertical可使 Slider 变成竖向模式,此时必须设置高度height属性
<template>
<div class="block">
<el-slider v-model="value" vertical height="200px"> </el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value: 0,
}
},
}
</script>
设置 marks 属性可以展示标记
<template>
<div class="block">
<el-slider v-model="value" range :marks="marks"> </el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value: [30, 60],
marks: {
0: "0°C",
8: "8°C",
37: "37°C",
50: {
style: {
color: "#1989FA",
},
label: "50%",
},
},
}
},
}
</script>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
model-value / v-model | 绑定值 | number | — | 0 |
min | 最小值 | number | — | 0 |
max | 最大值 | number | — | 100 |
disabled | 是否禁用 | boolean | — | false |
step | 步长 | number | — | 1 |
show-input | 是否显示输入框,仅在非范围选择时有效 | boolean | — | false |
show-input-controls | 在显示输入框的情况下,是否显示输入框的控制按钮 | boolean | — | true |
input-size | 输入框的尺寸 | string | large / medium / small / mini | small |
show-stops | 是否显示间断点 | boolean | — | false |
show-tooltip | 是否显示 tooltip | boolean | — | true |
format-tooltip | 格式化 tooltip message | function(value) | — | — |
range | 是否为范围选择 | boolean | — | false |
vertical | 是否竖向模式 | boolean | — | false |
height | Slider 高度,竖向模式时必填 | string | — | — |
label | 屏幕阅读器标签 | string | — | — |
debounce | 输入时的去抖延迟,毫秒,仅在show-input 等于 true 时有效 | number | — | 300 |
tooltip-class | tooltip 的自定义类名 | string | — | — |
marks | 标记, key 的类型必须为 number 且取值在闭区间 [min, max] 内,每个标记可以单独设置样式 | object | — | — |
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 值改变时触发(使用鼠标拖曳时,只在松开鼠标后触发) | 改变后的值 |
input | 数据改变时触发(使用鼠标拖曳时,活动过程实时触发) | 改变后的值 |
Progress 进度条用于展示操作进度,告知用户当前状态和预期。线形进度条Progress 组件设置percentage属性即可,表示进度条对应的...
使用tooltip设置该主题河流图特定的提示框浮层,本节介绍了此提示框浮层的一些属性。主题河流图提示框浮层属性position注意:ser...
ECharts 中提示框组件可以在多种地方使用,如:可以设置在全局,即tooltip可以设置在坐标系中,即grid.tooltip、polar.tooltip、...
graphic.elements[i]-ringECharts 圆环图形元素配置。graphic.elements[i]-ring.type |string[ default: ring ]用 setOption 首...
Highcharts 反向条形图Highcharts 条形图以下实例演示了使用负值的,反向条形图。实例文件名:highcharts_bar_negative.htmhtmlh...
AngularJS ng-blur 指令 AngularJS 参考手册AngularJS 实例当输入框失去焦点(onblur)时执行表达式:input ng-blur="count = count...
AngularJS ng-app 指令 AngularJS 参考手册AngularJS 实例让 body 元素称为AngularJS 应用的根元素:body ng-app=""p我的第一个表...
AngularJS ng-style 指令 AngularJS 参考手册AngularJS 实例使用AngularJS添加样式,使用 CSS key=>value 对象格式:body ng-app=...