57 lines
1.4 KiB
Plaintext
57 lines
1.4 KiB
Plaintext
<template>
|
||
<view :class="barClass" :style="trackStyle">
|
||
<view class="hr-pbar-i" :style="barStyle"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="uts" setup>
|
||
import { computed } from 'vue'
|
||
|
||
/**
|
||
* 进度条
|
||
* 高度用 rpx 下发，保证随屏宽等比缩放。
|
||
*/
|
||
const props = defineProps({
|
||
/** 百分比 0 ~ 100 */
|
||
percent : { type: Number, default: 0 },
|
||
/** 高度（设计稿 px，内部 ×2 转 rpx） */
|
||
h : { type: Number, default: 4 },
|
||
/** 进度色 */
|
||
color : { type: String, default: '#2563EB' },
|
||
/** 深色底（用于蓝色 hero / 视频条上） */
|
||
onDark : { type: Boolean, default: false }
|
||
})
|
||
|
||
const pct = computed(() : number => {
|
||
if (props.percent < 0) { return 0 }
|
||
if (props.percent > 100) { return 100 }
|
||
return props.percent
|
||
})
|
||
|
||
const barClass = computed(() : string => {
|
||
return props.onDark ? 'hr-pbar hr-pbar-dark' : 'hr-pbar'
|
||
})
|
||
|
||
const barColor = computed(() : string => {
|
||
return props.onDark ? '#FFFFFF' : props.color
|
||
})
|
||
|
||
const rpxH = computed(() : number => {
|
||
return props.h * 2
|
||
})
|
||
|
||
const trackStyle = computed(() : string => {
|
||
return `height:${rpxH.value}rpx;border-radius:${rpxH.value / 2}rpx;`
|
||
})
|
||
|
||
const barStyle = computed(() : string => {
|
||
return `width:${pct.value}%;height:${rpxH.value}rpx;border-radius:${rpxH.value / 2}rpx;background-color:${barColor.value};`
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
.hr-pbar-dark {
|
||
background-color: rgba(255, 255, 255, 0.22);
|
||
}
|
||
</style>
|