Vue3 实现进度条组件

样式如下，代码如下

<script setup>
import { computed, defineEmits, defineProps, onMounted, ref, watch } from 'vue'// 定义 props
const props = defineProps({// 初始百分比initialPercentage: {type: Number,default: 0,},
})// 定义 emits
const emits = defineEmits(['drag-percentage-change'])// 定义圆圈数量
const circleCount = 5
// 进度条容器引用
const progressBarContainer = ref(null)
// 可拖动圆圈的位置（百分比）
const draggableCircleLeftPercentage = ref(props.initialPercentage)
// 可拖动圆圈的位置样式
const draggableCircleLeft = computed(() => `${draggableCircleLeftPercentage.value}%`)
// 进度条直线宽度
const progressLineWidth = computed(() => '100%')
// 已完成部分直线宽度
const completedLineWidth = computed(() => `${draggableCircleLeftPercentage.value}%`)// 圆圈位置计算
const circles = ref([])
onMounted(() => {if (progressBarContainer.value) {const containerWidth = progressBarContainer.value.offsetWidthfor (let i = 0; i < circleCount; i++) {const leftPercentage = (i / (circleCount - 1)) * 100circles.value.push({left: `${leftPercentage}%`,})}}
})// 开始拖动
const isDragging = ref(false)
const startDragging = (e) => {if (!progressBarContainer.value)returnisDragging.value = trueconst containerRect = progressBarContainer.value.getBoundingClientRect()const startX = e.clientXconst handleMouseMove = (e) => {if (isDragging.value) {const offsetX = e.clientX - containerRect.leftconst containerWidth = containerRect.widthlet newLeft = (offsetX / containerWidth) * 100// 取整并确保在 0 到 100 之间newLeft = Math.min(100, Math.max(0, Math.round(newLeft)))draggableCircleLeftPercentage.value = newLeft// 抛出事件，返回当前百分比emits('drag-percentage-change', newLeft)}}const handleMouseUp = () => {if (isDragging.value) {isDragging.value = falsedocument.removeEventListener('mousemove', handleMouseMove)document.removeEventListener('mouseup', handleMouseUp)}}document.addEventListener('mousemove', handleMouseMove)document.addEventListener('mouseup', handleMouseUp)
}// 点击进度条
const handleBarClick = (e) => {if (!progressBarContainer.value)returnconst containerRect = progressBarContainer.value.getBoundingClientRect()const offsetX = e.clientX - containerRect.leftconst containerWidth = containerRect.widthlet clickPercentage = (offsetX / containerWidth) * 100// 取整并确保在 0 到 100 之间clickPercentage = Math.min(100, Math.max(0, Math.round(clickPercentage)))draggableCircleLeftPercentage.value = clickPercentage// 抛出事件，返回当前百分比emits('drag-percentage-change', clickPercentage)
}// 点击圆圈
const handleCircleClick = (index) => {const percentage = (index / (circleCount - 1)) * 100draggableCircleLeftPercentage.value = percentageemits('drag-percentage-change', percentage)
}// 监听 initialPercentage 的变化
watch(() => props.initialPercentage, (newValue) => {// 取整并确保在 0 到 100 之间const validValue = Math.min(100, Math.max(0, Math.round(newValue)))draggableCircleLeftPercentage.value = validValue
})
</script><template><div ref="progressBarContainer" class="progress-bar-container" @mousedown="handleBarClick"><div class="progress-line" :style="{ width: progressLineWidth }" /><div class="completed-line" :style="{ width: completedLineWidth }" /><divv-for="(circle, index) in circles":key="index"class="progress-circle":class="{ active: index * (100 / (circleCount - 1)) <= draggableCircleLeftPercentage }":style="{ left: `calc(${circle.left} - 5px)` }"@click="handleCircleClick(index)"/><divclass="draggable-circle":style="{ left: `calc(${draggableCircleLeft} - 7px)` }"@mousedown="startDragging"/></div>
</template><style scoped>
.progress-bar-container {position: relative;width: 100%;height: 20px;
}.progress-line {position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 100%;height: 2px;background-color: gray;z-index: 1;
}.completed-line {position: absolute;top: 50%;transform: translateY(-50%);left: 0;height: 2px;background-color: white;z-index: 2;
}.progress-circle {position: absolute;top: 50%;transform: translateY(-50%);width: 10px;height: 10px;border-radius: 50%;background-color: #808080;z-index: 3;cursor: pointer;
}.progress-circle.active {background-color: white;
}.draggable-circle {position: absolute;top: 50%;transform: translateY(-50%);width: 14px;height: 14px;border-radius: 50%;background-color: white;z-index: 4;cursor: pointer;
}
</style>

<template><div><CircleProgressBar:initialPercentage="initialValue"@drag-percentage-change="handlePercentageChange"/></div>
</template><script setup>
import { ref } from 'vue';
import CircleProgressBar from './CircleProgressBar.vue';const initialValue = ref(20); // 初始百分比为 20%const handlePercentageChange = (percentage) => {console.log('当前百分比:', percentage);// 你可以在这里处理接收到的百分比
};
</script>