当前位置：首页 > news >正文

使用vue3+ts封装一个Slider滑块组件

news 2025/7/22 22:02:11

创建一个名为 Slider.vue 的文件

<template><div class="slider-container"><inputtype="range":value="value"@input="handleInput"@change="handleChange"/><div class="slider-value">{{ value }}</div></div>
</template><script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';// 定义 props
const props = defineProps<{modelValue: number;min: number;max: number;step: number;
}>();// 定义 emits
const emit = defineEmits<{(e: 'update:modelValue', value: number): void;
}>();// 响应式引用当前值
const value = ref(props.modelValue);// 处理输入事件
const handleInput = (event: Event) => {const newValue = Number((event.target as HTMLInputElement).value);value.value = newValue;emit('update:modelValue', newValue);
};// 处理 change 事件
const handleChange = () => {// 这里可以添加额外的逻辑，比如验证或格式化值
};
</script><style scoped>
.slider-container {width: 100%;display: flex;flex-direction: column;align-items: center;
}input[type='range'] {width: 100%;
}.slider-value {margin-top: 10px;font-size: 1.2em;
}
</style>

在这个组件中，使用了 Vue 3 的 <script setup> 语法，它允许我们在单文件组件中使用 Composition API，而不需要额外的 setup 函数。我们使用 defineProps 来定义组件的 props，使用 defineEmits 来定义组件可以触发的事件。

组件的 props 包括：

modelValue：滑块的当前值。
min：滑块的最小值。
max：滑块的最大值。
step：滑块的步长。

组件触发的事件是 update:modelValue，它会在滑块的值改变时被触发，并传递新的值。

在模板中，使用了一个 <input> 元素来创建滑块，并使用 v-model 来绑定滑块的值。我们还添加了一个 handleInput 方法来处理滑块的输入事件，并在值改变时更新 value 引用和触发事件。

可以将这个组件导入到其他 Vue 组件中

<template><div><Sliderv-model="sliderValue":min="0":max="100":step="1"/><p>Slider value: {{ sliderValue }}</p></div>
</template><script setup lang="ts">
import { ref } from 'vue';
import Slider from './Slider.vue';const sliderValue = ref(50);
</script>