创建一个名为 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>
关注微信公众号温暖前端,不定期分享前端知识点和前端资料↓↓↓