一个多功能的Vue.js组件,可使用SVG,canvas或PURE CSS渲染圆形进度条。

安装和下载:

$ npm install v-circle

使用:

.vue文件的使用

<template>
<circle-css color="#3498db" width=120 font-size=48 pv=12 bold=8 text-bg-color='#f0f0f0'></circle-css>
</template>
 
<script>
import CssCircle from 'v-circle/components/css-circle.vue'
 
export default {
  components: {
    circleCss: CssCircle
  }
}
</script>

API:

CssCircles

prop类型描述默认值
colorString圆圈进度填充颜色#000000#2ecc71
widthNumber圆圈大小180150
fontSizeNumber圈进度值大小6464
pvNumber圈进度值750
textColorString圈进度值颜色#bdc3c7#bdc3c7
boldString圆圈进度轮廓宽度105
textBgColorString圈进度值背景色#000000#f9f9f9
borderColorString圈进度轮廓颜色#000000#bdc3c7
duringNumber圈子进度动画持续时间20.8
bgColorString圈进度背景色#000000#f0f0f0

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注