slider elementui
Slider 组件的基本用法
Element UI 的 Slider 组件用于通过拖动滑块在一个固定范围内选择值。基本用法如下：
<template>
<el-slider v-model="value"></el-slider>
</template>
<script>
export default {
data() {
return {
value: 0
}
}
}
</script>自定义范围和步长
可以通过 min 和 max 属性设置滑块的最小和最大值，step 属性控制步长：
<el-slider
v-model="value"
:min="20"
:max="80"
:step="5">
</el-slider>禁用状态
添加 disabled 属性可将滑块设置为禁用状态：
<el-slider v-model="value" disabled></el-slider>显示间断点
设置 show-stops 属性可以显示间断点：
<el-slider
v-model="value"
:step="10"
show-stops>
</el-slider>显示输入框
添加 show-input 属性可显示输入框，直接输入数值：
<el-slider v-model="value" show-input></el-slider>范围选择
使用 range 属性可开启范围选择模式，v-model 绑定值为数组：
<el-slider
v-model="value"
range
:min="0"
:max="100">
</el-slider>自定义滑块样式
通过 slider-style 属性可以自定义滑块的样式：
<el-slider
v-model="value"
:slider-style="{ backgroundColor: '#409EFF' }">
</el-slider>格式化提示内容
使用 format-tooltip 属性可以自定义提示内容的显示格式：
<el-slider
v-model="value"
:format-tooltip="formatTooltip">
</el-slider>
<script>
export default {
methods: {
formatTooltip(val) {
return val + '%'
}
}
}
</script>垂直模式
设置 vertical 属性可以将滑块显示为垂直方向：
<el-slider
v-model="value"
vertical
height="200px">
</el-slider>事件监听
Slider 组件提供了 change 和 input 事件，可以监听值的变化：
<el-slider
v-model="value"
@change="handleChange"
@input="handleInput">
</el-slider>
<script>
export default {
methods: {
handleChange(val) {
console.log('值改变:', val)
},
handleInput(val) {
console.log('输入中:', val)
}
}
}
</script>自定义标记点
通过 marks 属性可以在滑块上添加自定义标记点：
<el-slider
v-model="value"
:marks="marks">
</el-slider>
<script>
export default {
data() {
return {
marks: {
0: '0°C',
20: '20°C',
50: '50°C',
100: '100°C'
}
}
}
}
</script>自定义滑块按钮
使用 slider-button 插槽可以自定义滑块按钮：
<el-slider v-model="value">
<template #slider-button="{ value }">
<div class="custom-button">{{ value }}</div>
</template>
</el-slider>
<style>
.custom-button {
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
background-color: #409EFF;
color: #fff;
border-radius: 50%;
}
</style>
