menduner/src/components/ProgressBar/index.vue

<!-- 进度条 -->
<template>
  <div :class="{'pa-3': pa, 'd-flex': inlineDisplay, 'white-bgc': whiteBgc}">
    <div :style="`font-size: ${props.fontSize || 13}px;`">{{ props.label }}</div>
    <div class="d-flex align-center" :class="inlineDisplay ? 'ml-2' : 'mt-1'" style="flex: 1;">
      <v-progress-linear
        :bg-color="barBgColor"
        :color="props.barColor"
        :height="props.barHeight"
        :model-value="props.num"
        :rounded="props.rounded"
        :max="props.total"
        min="0"
      ></v-progress-linear>
      <div
        v-if="props.total !== 0"
        class="ms-4 text-h7"
        :style="`font-size: ${props.fontSize || 13}px; color: ${props.percentageColor || '#000'}`"
      >{{ Number.isInteger(props.num/props.total*100) ? (props.num/props.total*100) : (props.num/props.total*100).toFixed(2) }}%</div>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'ProgressBar-index'})
const props = defineProps({
  num: { type: Number, default: 1 },
  total: { type: Number, default: 2 },
  barHeight: { type: Number, default: 6 },
  fontSize: { type: Number, default: 13 },
  barColor: { type: String, default: 'var(--v-primary-base)' },
  barBgColor: { type: String, default: '#92aed9' },
  percentageColor: { type: String, default: '#000' },
  rounded: { type: Boolean, default: true },
  label: { type: String, default: '简历完成度' },
  // list: { type: Array, default: () => [] },
  inlineDisplay: { type: Boolean, default: false },
  whiteBgc: { type: Boolean, default: true },
  pa: { type: Boolean, default: true },
})

</script>
<style lang="scss" scoped>
</style>