【vue动态进度条】

效果

使用

<progress-bar width="90%"
							  defaultColor="#2E2E2F"
							  progressColor="#FB4D1D"
							  :progressValue="progressValue"/>

组件

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
	width: string;
	defaultColor: string;
	progressColor: string;
	progressValue: number;
}


const props = defineProps<Props>();

const progressWidth = computed(() => `${Math.min(props.progressValue, 100)}%`);
onMounted(()=>{
	console.log(props.progressValue)
})
</script>

<template>
	<div class="progress-bar" :style="{ width: props.width, backgroundColor: props.defaultColor, borderRadius: '5px', overflow: 'hidden' }">
		<div class="progress" :style="{ width: progressWidth, height: '100%', backgroundColor: props.progressColor }"></div>
	</div>
</template>

<style scoped>
.progress-bar {
	height: 20px;
}

.progress {
	transition: width 0.3s ease;
}
</style>