Vue3进度条

ProgressBar.vue

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  min?: number;
  max?: number;
  value?: number;
  height?: number;
}

const props = withDefaults(defineProps<Props>(), {
  min: 0,
  max: 100,
  value: 0,
  height: 20,
});

const progress = computed(() => {
  let actualMax = props.max - props.min;
  let actualValue = props.value - props.min;
  return actualValue / actualMax;
});

const percent = computed(() => {
  return `${(progress.value*100).toFixed(2)}%`;
});

const progressText = computed(() => {
  return `${props.value}/${props.max} (${percent.value})`;
});

const textColor = computed(() => "black");
const heightPx = computed(() => `${props.height}px`);
const radiusPx = computed(() => `${props.height/2}px`);
const backgroundColor = computed(() => "#EFEFEF");
const borderColor = computed(() => "#CBCBCB");
const barColor = computed(() => "#107C10");
</script>

<template>
  <div class="progress-bar">
    <div class="container">
      <div class="background">
        <div class="clip">
          <div class="bar"></div>
        </div>
      </div>
      <div class="text">
        <span>{{progressText}}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
@height: v-bind(heightPx);

.progress-bar {
  width: 100%;
  height: @height;

  .container {
    position: relative;

    .background {
      position: absolute;

      width: 100%;
      height: @height;
      background-color: v-bind(backgroundColor);
      border: 1px solid v-bind(borderColor);
      border-radius: v-bind(radiusPx);

      .clip {
        clip-path: inset(0 round v-bind(radiusPx));

        .bar {
          width: v-bind(percent);
          height: @height;
          background-color: v-bind(barColor);
        }
      }
    }

    .text {
      position: absolute;
      width: 100%;
      height: @height;
      left: 1px;
      top: 1px;

      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      span {
        font-size: 0.8em;
        color: v-bind(textColor);
      }
    }
  }
}
</style>