mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-05 13:48:03 +08:00
3.0 KiB
3.0 KiB
Slider 滑块
通过拖动滑块在一个固定区间内进行选择
基础用法
在拖动滑块时,显示当前值
:::demo 通过设置绑定值自定义滑块的初始值
<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">禁用</span>
<el-slider v-model="value3" disabled></el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value1: 0,
value2: 50,
value3: 42
}
}
}
</script>
:::
离散值
选项可以是离散的
:::demo 改变step
的值可以改变步长,通过设置show-step
属性可以显示间断点
<template>
<div class="block">
<span class="demonstration">不显示间断点</span>
<el-slider
v-model="value4"
:step="10">
</el-slider>
</div>
<div class="block">
<span class="demonstration">显示间断点</span>
<el-slider
v-model="value5"
:step="10"
show-stops>
</el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value4: 0,
value5: 0
}
}
}
</script>
:::
带有输入框
通过输入框设置精确数值
:::demo 设置show-input
属性会在右侧显示一个输入框
<template>
<div class="block">
<el-slider
v-model="value6"
show-input>
</el-slider>
</div>
</template>
<script>
export default {
data() {
return {
value6: 0
}
}
}
</script>
:::
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
min | 最小值 | number | — | 0 |
max | 最大值 | number | — | 100 |
disabled | 是否禁用 | boolean | — | false |
step | 步长 | number | — | 1 |
show-input | 是否显示输入框 | boolean | — | false |
show-stops | 是否显示间断点 | boolean | — | false |
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 值改变时触发 | 改变后的值 |