自定义进度条：Vue 组件实践

在前端开发中，进度条是一种常见的用户界面元素，用于展示任务的完成情况或者指示加载过程。然而，有时候标准的进度条并不能完全满足我们的需求，因此，我们可能需要创建自定义的进度条来实现特定的效果或功能。

在本文中，我们将介绍如何使用 Vue.js 创建一个灵活多样的自定义进度条组件，该组件可以根据传入的数据动态渲染进度段，并且支持动画效果和内容展示。

Vue 进度条组件设计与实现

首先，让我们来看一下我们要创建的 Vue 进度条组件的设计和实现。

组件功能

我们的进度条组件应具备以下功能：

• 接受一个包含进度段数据的数组作为输入。
• 根据传入的数据动态渲染进度段。
• 支持动画效果，当启用动画时，进度条会以动画形式展示。
• 可选择是否展示进度段的内容。
• 当前进度超出总长时超出部分红色填充。

实现思路

为了实现上述功能，我们需要进行以下步骤：

1. 创建 Vue 组件，并定义所需的 props。
2. 根据传入的数据动态计算各进度段的宽度和样式。
3. 在模板中使用 v-for 指令渲染进度段。
4. 根据用户设置决定是否启用动画效果和是否展示内容。

下面是实现了以上功能的 Vue 进度条组件代码：

<template>
	<div class="progress-bar">
		<div
			v-for="(segment, index) in segments"
			:key="index"
			:style="{ width: segment.width + '%', backgroundColor: segment.color }"
			:class="{
				isLast: segment.isLast,
				isExceed: segment.isExceed,
				isAnimated: isAnimated && !segment.isExceed
			}"
		>
			<slot name="content" :segment="segment">
				<span
					v-if="segment.content && segment.value !== undefined && showContent"
					>{{ `${segment.content}：${segment.value}` }}</span
				>
			</slot>
		</div>
	</div>
</template>

<script>
export default {
	name: 'CustomProgress',
	props: {
		segmentsData: {
			type: Array,
			default: () => []
		},
		totalValue: {
			type: Number,
			default: 0
		},
		isAnimated: {
			type: Boolean,
			default: false
		},
		showContent: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		totalSegments() {
			return this.segmentsData.length
		},
		totalSegmentsValue() {
			return this.segmentsData.reduce(
				(total, segment) => total + segment.value,
				0
			)
		},
		exceedingSegments() {
			if (this.totalSegmentsValue > this.totalValue) {
				const exceedingValue = this.totalSegmentsValue - this.totalValue
				const exceedingWidth = (exceedingValue / this.totalValue) * 100
				return {
					width: exceedingWidth,
					color: '#cc0000',
					content: '',
					value: '',
					isExceed: true
				}
			} else {
				return null
			}
		},
		segments() {
			const segments = []
			for (let i = 0; i < this.totalSegments; i++) {
				const segment = {
					width:
						(this.segmentsData[i].value / this.totalValue) * 100 ||
						100 / this.totalSegments,
					color: this.segmentsData[i].color || '#ddd',
					content: this.segmentsData[i].content || '',
					value: this.segmentsData[i].value || 0,
					isLast: i === this.totalSegments - 1
				}
				segments.push(segment)
			}
			if (this.exceedingSegments) {
				segments.push(this.exceedingSegments)
			}
			return segments
		}
	}
}
</script>

<style lang="less" scoped>
.progress-bar {
	display: flex;
	height: 16px;
	width: 100%;
	background-color: rgba(0, 153, 255, 0.1);
	border-radius: 10px;
	overflow: hidden;
	z-index: 1;
}

.progress-bar div {
	height: 100%;
	padding: 0 8px;
	display: flex;
	align-items: center;
	color: white;
	position: relative;
	font-size: 12px;
	z-index: 2;
	&.isLast {
		border-radius: 0 10px 10px 0;
	}
	&.isExceed {
		z-index: 1;
	}
	&.isExceed::after {
		background: #cc0000;
		content: '';
		position: absolute;
		width: 9px;
		height: 100%;
		top: 0;
		left: -8px;
	}
}

// 动画来自ant-progress 不需要的可以注释掉
.isAnimated {
	position: relative;
}

.isAnimated::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	background: #fff;
	opacity: 0;
	animation: ant-progress-active 3s cubic-bezier(0.23, 1, 0.32, 1) infinite;
	content: '';
	cursor: default;
}
</style>

**组件使用 (展示内容可以使用插槽v-slot="segment")**
<CustomProgress
	:totalValue="totalValue"
	:showContent="true"
	:isAnimated="true"
	:segmentsData="segmentsData" />

**数据结构**
totalValue:80,
segmentsData: [
	{ value: 20, color: '#0099ff', content: '训练' },
	{ value: 40, color: '#00b23b', content: '测试' }
]

结束语

嘿嘿嘿需求砍了，留个纪念。