插件名称 | k-progress |
---|---|
发布时间 | 2020年8月14日 |
插件作者 | xrkffgg |
使用k-progress组件,您可以可视化动画,可自定义的线性进度条中的任何百分比值。
2020年8月13日
# NPM
$ npm install k-progress --save
1.安装并导入组件。
import KProgress from 'k-progress';
Vue.component('k-progress', KProgress);
2.在模板中创建进度条。
<template>
<div>
<k-progress
status="success"
type="line"
:percent="20" >
</k-progress>
<k-progress
active
status="error"
type="lump"
:cut-width="4"
:percent="50" >
</k-progress>
<k-progress
active
status="error"
type="line"
:border="false"
:color="['#40a9ff', '#5cdbd3']"
:percent="60" >
</k-progress>
<k-progress
active
status="error"
type="lump"
:border="false"
:line-height="8"
:cut-width="4"
:cut-color="'#40a9ff'"
:color="['#f5af19', '#f12711']"
:percent="80" >
</k-progress>
</div>
</template>
3.可能的 props 。
percent: {
type: Number,
default: 0,
required: true,
validator: val => val >= 0 && val <= 100
},
showText: {
type: Boolean,
default: true
},
active: {
type: Boolean,
default: false
},
bgColor: {
type: String,
default: '#ebeef5'
},
cutColor: {
type: String,
default: '#ebeef5'
},
cutWidth: {
type: Number,
default: 1,
},
type: {
type: String,
default: 'line',
validator: val => ['line', 'lump',].indexOf(val) > -1
},
border: {
type: Boolean,
default: true
},
status: {
type: String,
validator: val => ['success', 'warning', 'error'].indexOf(val) > -1
},
lineHeight: {
type: Number,
default: 6
},
color: {
type: [String, Array, Function],
default: ''
},
activeColor: {
type: [String, Array],
default: ''
}
官网:https://github.com/xrkffgg/k-progress/blob/master/README-CN.md
GitHub下载:https://github.com/xrkffgg/k-progress/archive/master.zip