115 lines
2.0 KiB
Vue
115 lines
2.0 KiB
Vue
<template>
|
|
<view class="progress-bar">
|
|
<view
|
|
class="progress-track"
|
|
:style="trackStyle"
|
|
>
|
|
<view
|
|
class="progress-fill"
|
|
:style="fillStyle"
|
|
></view>
|
|
</view>
|
|
<text
|
|
v-if="showText"
|
|
class="progress-text"
|
|
:style="textStyle"
|
|
>{{ clampedPercent }}%</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import themeMixin from '@/mixins/themeMixin.js'
|
|
|
|
export default {
|
|
name: 'ProgressBar',
|
|
mixins: [themeMixin],
|
|
props: {
|
|
percent: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 12
|
|
},
|
|
showText: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
trackColor: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
animated: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'gradient'
|
|
}
|
|
},
|
|
computed: {
|
|
clampedPercent() {
|
|
return Math.max(0, Math.min(100, this.percent))
|
|
},
|
|
statusColor() {
|
|
if (this.color) return this.color
|
|
if (this.clampedPercent >= 100) return this.themeConfig.dangerColor
|
|
if (this.clampedPercent > 80) return this.themeConfig.warningColor
|
|
return this.themeConfig.primaryColor
|
|
},
|
|
trackStyle() {
|
|
return {
|
|
height: this.height + 'rpx',
|
|
backgroundColor: this.trackColor || this.themeConfig.borderLight
|
|
}
|
|
},
|
|
fillStyle() {
|
|
const style = {
|
|
width: this.clampedPercent + '%',
|
|
transition: this.animated ? 'width 0.4s ease' : 'none'
|
|
}
|
|
if (this.type === 'gradient') {
|
|
style.background = `linear-gradient(90deg, ${this.statusColor}, ${this.themeConfig.gradientEnd})`
|
|
} else {
|
|
style.backgroundColor = this.statusColor
|
|
}
|
|
return style
|
|
},
|
|
textStyle() {
|
|
return {
|
|
color: this.themeConfig.textSecondary
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.progress-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.progress-track {
|
|
flex: 1;
|
|
border-radius: 100rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
border-radius: 100rpx;
|
|
}
|
|
|
|
.progress-text {
|
|
font-size: 22rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
</style>
|