<template>
|
<view class="el-progress">
|
<view class="el-progress-bar">
|
<view class="el-progress-bar__outer" :style="{ height: `${strokeWidth}px` }">
|
<view class="el-progress-bar__inner" :style="innerStyle" />
|
</view>
|
</view>
|
<view v-if="showText" class="el-progress__text">{{ text }}</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { computed } from "vue";
|
|
const props = defineProps({
|
percentage: { type: Number, default: 0 },
|
strokeWidth: { type: Number, default: 10 },
|
showText: { type: Boolean, default: true },
|
color: { type: String, default: "#409EFF" },
|
});
|
|
const safePercent = computed(() => {
|
const n = Number(props.percentage);
|
if (!Number.isFinite(n)) return 0;
|
return Math.max(0, Math.min(100, Math.floor(n)));
|
});
|
|
const innerStyle = computed(() => ({
|
width: `${safePercent.value}%`,
|
backgroundColor: props.color,
|
}));
|
|
const text = computed(() => `${safePercent.value}%`);
|
</script>
|
|
<style scoped>
|
.el-progress {
|
width: 100%;
|
}
|
.el-progress-bar__outer {
|
background-color: rgba(0, 0, 0, 0.08);
|
border-radius: 100px;
|
overflow: hidden;
|
}
|
.el-progress-bar__inner {
|
height: 100%;
|
border-radius: 100px;
|
transition: width 0.15s ease;
|
}
|
.el-progress__text {
|
margin-top: 10rpx;
|
text-align: center;
|
font-size: 26rpx;
|
color: rgba(0, 0, 0, 0.55);
|
}
|
</style>
|
