插件名称 | vue3-circle-progress |
---|---|
发布时间 | 2021年11月26日 |
插件作者 | delowardev |
Vue 3 的轻量级但高度可定制的圆形进度条组件。
# Yarn
$ yarn add vue3-circle-progress
# NPM
$ npm i vue3-circle-progress
1.导入并注册圆圈进度组件。
import "vue3-circle-progress/dist/circle-progress.css";
import CircleProgress from "vue3-circle-progress";
export default {
components: {CircleProgress}
}
2. 将circle-progress
组件添加到应用程序并指定百分比如下:
<circle-progress :percent="50" />
3. 使用以下道具和选项自定义圆圈进度。
size: {
type: Number,
default: 180
},
borderWidth: {
type: Number,
default: 15
},
borderBgWidth: {
type: Number,
default: 15
},
fillColor: {
type: String,
default: "#288feb"
},
emptyColor: {
type: String,
default: "#dddddd"
},
background: {
type: String,
default: "none"
},
className: {
type: String,
default: ""
},
percent: {
type: Number,
default: 50
},
linecap: {
type: String,
default: "round"
},
transition: {
type: Number,
default: 400
},
isGradient: {
type: Boolean,
default: false
},
/*
angle: 0,
startColor: '#ff0000',
stopColor: '#ffff00'
*/
gradient: {
type: Object,
default: () => GRADIENT
},
isShadow: {
type: Boolean,
default: false
},
/*
inset: false,
vertical: 3,
horizontal: 0,
blur: 0,
opacity: .4,
color: '#000000'
*/
shadow: {
type: Object,
default: () => SHADOW
},
isBgShadow: {
type: Boolean,
default: false
},
bgShadow: {
type: Object,
default: () => BG_SHADOW
},
viewport: {
type: Boolean,
default: false
},
onViewport: {
type: Function
},
class: {
type: String,
default: ""
},
showPercent: {
type: Boolean,
default: false
}