vue3 组件-动画进度条

该组件依赖element-plus。

基础用法

<template>
  <div>
    <KProgress :percentage="50" />
    <KProgress
      :percentage="50"
      :duration="10000"
    />

    <!-- element el-progress 属性-->
    <KProgress
      type="circle"
      :percentage="50"
    />

    <KProgress
      type="circle"
      :percentage="100"
      status="success"
    />

    <KProgress
      :text-inside="true"
      :stroke-width="26"
      :percentage="70"
    />
  </div>
</template>

<script setup lang="ts">
import { KProgress } from "@tomiaa/vue3-components"
</script>

<style scoped lang="scss">
:deep(svg) {
  width: unset;
  height: unset;
}
</style>

属性

属性	说明	类型	默认值	必填
percentage	进度	number		true
duration	动画时长，毫秒	number	3000

类型声明

import type {
  ProgressProps, // 属性声明
} from "@tomiaa/vue3-components"

// ProgressProps["属性名"]
// const prop: ProgressProps["属性名"] = xxx