vue线性渐变
k进度 (k-progress)
A Vue plugin, linear progress bar.
Vue插件,线性进度条。
📦安装 (📦 Install)
npm install -S k-progress
# or
yarn add k-progress
🔨开始开始 (🔨 Begin Start)
// main.js
import KProgress from 'k-progress';
Vue.component('k-progress', KProgress);
s属性 (📔 Attributes)
Attribute | Type | Default | Optional | explain |
---|---|---|---|---|
percent | Number | 0 | 0-100 | Percent (Required) |
line-height | Number | 6 | Progress bar height | |
type | String | line | line / lump | Progress bar type |
status | String | success / warning / error | Progress bar status | |
color | String / Array / Function | Progress bar color; When using Array , the limit is 6; When using Function , the argument is percent | ||
color-flow | Boolean | false | Whether to enable color flow | |
flow-second | Number | 5 | 1-6 | The time required for the flow, that is, the smaller the time, the faster the speed |
bg-color | String | #ebeef5 | Color code | Progress bar background color |
border | Boolean | true | Whether arc | |
show-text | Boolean | true | Whether to show progress bar text | |
format | Function | Custom text display, parameter is percent | ||
cut-width | Number | 1 | lump width | |
cut-color | String | #ebeef5 | Color code | lump color |
active | Boolean | false | Whether to enable dynamic effects | |
active-color | String | Dynamic effect color |
属性 | 类型 | 默认 | 可选的 | 说明 |
---|---|---|---|---|
百分 | 数 | 0 | 0-100 | 百分比(必填) |
行高 | 数 | 6 | 进度条高度 | |
类型 | 串 | line | line / lump | 进度条类型 |
状态 | 串 | success / warning / error | 进度栏状态 | |
颜色 | 字符串/数组/函数 | 进度条颜色; 使用Array ,限制为6; 使用Function ,参数为percent | ||
色流 | 布尔型 | false | 是否启用色彩流 | |
流量秒 | 数 | 5 | 1-6 | 流程所需的时间,即时间越短,速度越快 |
背景色 | 串 | #ebeef5 | 色标 | 进度栏背景色 |
边境 | 布尔型 | true | 是否圆弧 | |
显示文字 | 布尔型 | true | 是否显示进度条文字 | |
格式 | 功能 | 自定义文本显示,参数为percent | ||
裁切宽度 | 数 | 1个 | lump 宽 | |
切色 | 串 | #ebeef5 | 色标 | lump 色 |
活性 | 布尔型 | false | 是否启用动态效果 | |
活性色 | 串 | 动态效果色 |
vue线性渐变