# 🌈 k-progress
一个 Vue 插件，线性进度条。
# 📦 安 装
# vue2
npm install -S k-progress
# vue3
npm install -S k-progress-v3
# or
yarn add k-progress
yarn add k-progress-v3
# 🔨 开始使用
// main.js - vue2
import KProgress from 'k-progress';
Vue.component('k-progress', KProgress);
// main.js - vue3
import KProgress from 'k-progress';
const app = createApp(App);
app
.component('k-progress', KProgress)
.mount('#app');
# 🌀 例 子
# 🌟 基本用法
可设置不同的
status、border、color、bg-color展示不同的颜色效果
10%
20%
30%
40%
50%
60%
70%
10%
# 🌟 不同类型
可设置
lump类型，同时支持宽度和颜色设置
20%
40%
60%
80%
# 🌟 高度设置
可设置不同的
line-height展示不同的尺寸，默认为6
10%
20%
30%
40%
# 🌟 文字设置
可通过
show-text设置是否显示文字，可format自定义文字显示
50%
QAQ
^_^
# 🌟 动效设置
可通过
active、active-color、color-flow来设置进度条动态效果
40%
60%
80%
100%
# 📔 参 数
| 参 数 | 类 型 | 默认值 | 可选值 | 说 明 |
|---|---|---|---|---|
| percent | Number | 0 | 0-100 | 百分比（必填） |
| line-height | Number | 6 | 进度条高度 | |
| type | String | line | line / lump | 进度条类型 |
| status | String | success / warning / error | 进度条状态 | |
| color | String / Array / Function | 进度条颜色；当使用Array时，限制个数为 6；当使用 Function 时，参数为 percent | ||
| color-flow | Boolean | false | 是否开启颜色流动 | |
| flow-second | Number | 5 | 1-6 | 流动所需时间，即时间越小，速度越快 |
| bg-color | String | #ebeef5 | 颜色代码 | 进度条背景颜色 |
| border | Boolean | true | 是否圆弧 | |
| show-text | Boolean | true | 是否显示进度条文字 | |
| format | Function | 自定义文字显示，参数为 percent | ||
| cut-width | Number | 1 | lump 宽度 | |
| cut-color | String | #ebeef5 | 颜色代码 | lump 颜色 |
| active | Boolean | false | 是否开启动效 | |
| active-color | String | 动效颜色 |
# 📒 更新日志
# GitHub
← 📋 列 表