<div class="card">
<ProgressBar :value="complateCount*100/state.formData.questionCount" class="h-10"> {{ complateCount }} /{{ state.formData.questionCount }} </ProgressBar>
</div>
ProgressBar 必须引入,不然进度条不会出现。
<script lang="ts" setup>
import ProgressBar from 'primevue/progressbar'
const state = reactive({
formData: {
id: '',
name: '',
description: '',
formDesc: '',
limit: 0,
questionCount: 0,
list: []
} as PaperDetails
})
//computed为计算属性可以动态的计算当前的进度,只能用于计算,一般不能修改其他值(computed用於計算某個值, 當它有參考到的反應性變數有變化時它才會更新,
//且計算本身是"無副作用"的;"無副作用"的意思是過程中不應修改外部變數)
const complateCount = computed(() => {
return 1
})
</script>
<style lang="less" scoped>
.card :deep(.p-progressbar-label){
display: flex;
}
</style>
显示效果图:
注意:
1、进度条默认分母为100,例如一共有十道题,目前做了一道,但是显示的进度是1/100而不是1/10,需要:value处转换为(1100)/10也就是(目前进度100)/总题数。
2、部分可能进度条上不会出现数字需要添加style 部分。