vue 滑杆组件实现
实现基础滑杆组件
使用Vue的v-model和原生<input type="range">实现基础功能：
<template>
<div>
<input
type="range"
v-model="sliderValue"
:min="min"
:max="max"
@input="handleInput"
/>
<span>{{ sliderValue }}</span>
</div>
</template>
<script>
export default {
props: {
min: { type: Number, default: 0 },
max: { type: Number, default: 100 }
},
data() {
return {
sliderValue: 50
}
},
methods: {
handleInput() {
this.$emit('update:modelValue', this.sliderValue)
}
}
}
</script>自定义样式滑杆
通过CSS自定义滑杆外观：
input[type=range] {
-webkit-appearance: none;
width: 100%;
height: 8px;
background: #ddd;
border-radius: 4px;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #42b983;
border-radius: 50%;
cursor: pointer;
}双向绑定改进
使用计算属性实现更灵活的双向绑定：
<script>
export default {
props: ['modelValue'],
computed: {
value: {
get() {
return this.modelValue
},
set(value) {
this.$emit('update:modelValue', value)
}
}
}
}
</script>添加刻度标记
在滑杆下方显示刻度标记：
<template>
<div class="slider-container">
<input type="range" v-model="value" :min="min" :max="max" step="10"/>
<div class="slider-marks">
<span v-for="mark in marks" :key="mark">{{ mark }}</span>
</div>
</div>
</template>
<script>
export default {
computed: {
marks() {
return Array.from({length: (this.max-this.min)/10 + 1}, (_,i) => this.min + i*10)
}
}
}
</script>垂直方向滑杆
通过CSS transform实现垂直滑杆：
.vertical-slider {
transform: rotate(270deg);
width: 150px;
margin: 50px;
}使用第三方库
推荐使用专门为Vue设计的滑杆组件库：
vue-slider-component：功能丰富，支持多种样式和配置v-range-slider：适用于范围选择场景vue-js-slider：轻量级解决方案
安装示例：
npm install vue-slider-component --save基础使用：
<template>
<vue-slider v-model="value" :min="0" :max="100" />
</template>
<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
components: { VueSlider },
data() {
return { value: 30 }
}
}
</script>
