Vue3 实现进度条组件

样式如下，代码如下

1. <script setup>
2. import { computed, defineEmits, defineProps, onMounted, ref, watch } from 'vue'
4. // 定义 props
5. const props = defineProps({
6.   // 初始百分比
7.   initialPercentage: {
8.     type: Number,
9.     default: 0,
10.   },
11. })
13. // 定义 emits
14. const emits = defineEmits(['drag-percentage-change'])
16. // 定义圆圈数量
17. const circleCount = 5
18. // 进度条容器引用
19. const progressBarContainer = ref(null)
20. // 可拖动圆圈的位置（百分比）
21. const draggableCircleLeftPercentage = ref(props.initialPercentage)
22. // 可拖动圆圈的位置样式
23. const draggableCircleLeft = computed(() => `${draggableCircleLeftPercentage.value}%`)
24. // 进度条直线宽度
25. const progressLineWidth = computed(() => '100%')
26. // 已完成部分直线宽度
27. const completedLineWidth = computed(() => `${draggableCircleLeftPercentage.value}%`)
29. // 圆圈位置计算
30. const circles = ref([])
31. onMounted(() => {
32.   if (progressBarContainer.value) {
33.     const containerWidth = progressBarContainer.value.offsetWidth
34.     for (let i = 0; i < circleCount; i++) {
35.       const leftPercentage = (i / (circleCount - 1)) * 100
36.       circles.value.push({
37.         left: `${leftPercentage}%`,
38.       })
39.     }
40.   }
41. })
43. // 开始拖动
44. const isDragging = ref(false)
45. const startDragging = (e) => {
46.   if (!progressBarContainer.value)
47.     return
48.   isDragging.value = true
49.   const containerRect = progressBarContainer.value.getBoundingClientRect()
50.   const startX = e.clientX
52.   const handleMouseMove = (e) => {
53.     if (isDragging.value) {
54.       const offsetX = e.clientX - containerRect.left
55.       const containerWidth = containerRect.width
56.       let newLeft = (offsetX / containerWidth) * 100
57.       // 取整并确保在 0 到 100 之间
58.       newLeft = Math.min(100, Math.max(0, Math.round(newLeft)))
59.       draggableCircleLeftPercentage.value = newLeft
60.       // 抛出事件，返回当前百分比
61.       emits('drag-percentage-change', newLeft)
62.     }
63.   }
65.   const handleMouseUp = () => {
66.     if (isDragging.value) {
67.       isDragging.value = false
68.       document.removeEventListener('mousemove', handleMouseMove)
69.       document.removeEventListener('mouseup', handleMouseUp)
70.     }
71.   }
73.   document.addEventListener('mousemove', handleMouseMove)
74.   document.addEventListener('mouseup', handleMouseUp)
75. }
77. // 点击进度条
78. const handleBarClick = (e) => {
79.   if (!progressBarContainer.value)
80.     return
81.   const containerRect = progressBarContainer.value.getBoundingClientRect()
82.   const offsetX = e.clientX - containerRect.left
83.   const containerWidth = containerRect.width
84.   let clickPercentage = (offsetX / containerWidth) * 100
85.   // 取整并确保在 0 到 100 之间
86.   clickPercentage = Math.min(100, Math.max(0, Math.round(clickPercentage)))
87.   draggableCircleLeftPercentage.value = clickPercentage
88.   // 抛出事件，返回当前百分比
89.   emits('drag-percentage-change', clickPercentage)
90. }
92. // 点击圆圈
93. const handleCircleClick = (index) => {
94.   const percentage = (index / (circleCount - 1)) * 100
95.   draggableCircleLeftPercentage.value = percentage
96.   emits('drag-percentage-change', percentage)
97. }
99. // 监听 initialPercentage 的变化
100. watch(() => props.initialPercentage, (newValue) => {
101.   // 取整并确保在 0 到 100 之间
102.   const validValue = Math.min(100, Math.max(0, Math.round(newValue)))
103.   draggableCircleLeftPercentage.value = validValue
104. })
105. </script>
107. <template>
108.   <div ref="progressBarContainer" class="progress-bar-container" @mousedown="handleBarClick">
109.     <div class="progress-line" :style="{ width: progressLineWidth }" />
110.     <div class="completed-line" :style="{ width: completedLineWidth }" />
111.     <div
112.       v-for="(circle, index) in circles"
113.       :key="index"
114.       class="progress-circle"
115.       :class="{ active: index * (100 / (circleCount - 1)) <= draggableCircleLeftPercentage }"
116.       :style="{ left: `calc(${circle.left} - 5px)` }"
117.       @click="handleCircleClick(index)"
118.     />
119.     <div
120.       class="draggable-circle"
121.       :style="{ left: `calc(${draggableCircleLeft} - 7px)` }"
122.       @mousedown="startDragging"
123.     />
124.   </div>
125. </template>
127. <style scoped>
128. .progress-bar-container {
129.   position: relative;
130.   width: 100%;
131.   height: 20px;
132. }
134. .progress-line {
135.   position: absolute;
136.   top: 50%;
137.   transform: translateY(-50%);
138.   left: 0;
139.   width: 100%;
140.   height: 2px;
141.   background-color: gray;
142.   z-index: 1;
143. }
145. .completed-line {
146.   position: absolute;
147.   top: 50%;
148.   transform: translateY(-50%);
149.   left: 0;
150.   height: 2px;
151.   background-color: white;
152.   z-index: 2;
153. }
155. .progress-circle {
156.   position: absolute;
157.   top: 50%;
158.   transform: translateY(-50%);
159.   width: 10px;
160.   height: 10px;
161.   border-radius: 50%;
162.   background-color: #808080;
163.   z-index: 3;
164.   cursor: pointer;
165. }
167. .progress-circle.active {
168.   background-color: white;
169. }
171. .draggable-circle {
172.   position: absolute;
173.   top: 50%;
174.   transform: translateY(-50%);
175.   width: 14px;
176.   height: 14px;
177.   border-radius: 50%;
178.   background-color: white;
179.   z-index: 4;
180.   cursor: pointer;
181. }
182. </style>

复制代码

1. <template>
2.   <div>
3.     <CircleProgressBar
4.       :initialPercentage="initialValue"
5.       @drag-percentage-change="handlePercentageChange"
6.     />
7.   </div>
8. </template>
10. <script setup>
11. import { ref } from 'vue';
12. import CircleProgressBar from './CircleProgressBar.vue';
14. const initialValue = ref(20); // 初始百分比为 20%
16. const handlePercentageChange = (percentage) => {
17.   console.log('当前百分比:', percentage);
18.   // 你可以在这里处理接收到的百分比
19. };
20. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。