vue3 组件-动画进度条
该组件依赖element-plus。
基础用法
vue
<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 |
类型声明
ts
import type {
ProgressProps, // 属性声明
} from "@tomiaa/vue3-components"
// ProgressProps["属性名"]
// const prop: ProgressProps["属性名"] = xxx