vue3.0 + ts 怎么显示进度条

<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 部分。