# 🌈 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');

# 🌀 例 子

# 🌟 基本用法

可设置不同的 statusbordercolorbg-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
^_^
显示代码

# 🌟 动效设置

可通过 activeactive-colorcolor-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

上次更新: 11/16/2020, 9:54:27 AM