©2020-2024 ioDraw All rights reserved
* 环形进度条可设置背景颜色，遮罩层，文字，百分值默认保存两位小数
* sizeOut:底圈半径 Number 默认值：100
* sizeIn里圈半径 Number 默认值：80
* size进度条大小 Number 默认值：10 注意：需要满足sizeOut>sizeIn+size
* colorBg背景色 String 默认值：#fff 支持rgb\rgba\十六进制（3位或者6位）\hsl\hsla
* colorTop进度条颜色 String 默认值：#0f0 支持rgb\rgba\十六进制（3位或者6位）\hsl\hsla
* colorBottom进度条打底色 String 默认值：#ccc 支持rgb\rgba\十六进制（3位或者6位）\hsl\hsla
* target进度的百分比 Number默认值：0
* total：总数 Number默认值100
* index:当前完成的个数 默认值0
注意：如果选择target会优先使用target，如果没有传入target可以采用total配合index的方式，由本组建进行计算
* text:显示文本 String 默认值:进行中
* textSize文本大小 Number 默认值：20
* textcolor文本颜色 String 默认值：#f50 支持rgb\rgba\十六进制（3位或者6位）\hsl\hsla
* percentageSize:百分比文字颜色 String默认值#ff6321 支持rgb\rgba\十六进制（3位或者6位）\hsl\hsla
* percentageSize：百分数文字大小 Number 默认值 30
* encumbrances：百分值保留多少位小数 Number 默认值 2
* hasMask：是否有遮罩层 Boolean 默认值false <template> <div :class=
"hasMask?'hasmask':''"> <svg ref="svg" :class=
"['yh-progress-box',hasMask?'hasmask':'']" :style=
"{height:sizeOut*2+'px',width:sizeOut*2+'px',backgroundColor:colorBg}"> <circle
cx="75" cy="75" :r="sizeIn" fill="transparent" :stroke="colorBottom" :stroke-
width="size" :stroke-dasharray="2*sizeIn*3.14" stroke-dashoffset="0" class=
"yh-progress-bottom" :style="{transformOrigin:`${sizeOut}px
75px`,width:sizeIn*2+'px',height:sizeIn*2+'px'}"></circle> <circle cx="75" cy=
"75" :r="sizeIn" fill="transparent" :stroke="colorTop" :stroke-width="size" :
stroke-dasharray="2*sizeIn*3.14" :stroke-dashoffset="show" class=
"yh-progress-top" :style="{transformOrigin:`${sizeOut}px
75px`,width:sizeIn*2+'px',height:sizeIn*2+'px'}" > </circle> <text :x="sizeOut"
:y="sizeOut" text-anchor="middle" :fill="percentageColor" :font-size=
"percentageSize" font-weight="600"> {{percentage}}% </text> <text :x="sizeOut" :
y="sizeOut+percentageSize" text-anchor="middle" :font-size="textSize" :fill=
"textcolor"> {{text}} </text> </svg> </div> </template> <script> function
CheckIsColor(bgVal) { let type=''; if(/^rgb\(/.test(bgVal)){
//如果是rgb开头，200-249，250-255，0-199 type =
"^[rR][gG][Bb][\(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){2}[\\s]*(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)[\\s]*[\)]{1}$"
; }else if(/^rgba\(/.test(bgVal)){ //如果是rgba开头，判断0-255:200-249，250-255，0-199
判断0-1：0 1 1.0 0.0-0.9 type =
"^[rR][gG][Bb][Aa][\(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){3}[\\s]*(1|1.0|0|0.[0-9])[\\s]*[\)]{1}$"
; }else if(/^#/.test(bgVal)){ //六位或者三位 type =
"^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$" }else if(/^hsl\(/.test(bgVal)){ //判断0-360
判断0-100%(0可以没有百分号) type =
"^[hH][Ss][Ll][\(]([\\s]*(2[0-9][0-9]|360｜3[0-5][0-9]|[01]?[0-9][0-9]?)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*)[\)]$"
; }else if(/^hsla\(/.test(bgVal)){ type =
"^[hH][Ss][Ll][Aa][\(]([\\s]*(2[0-9][0-9]|360｜3[0-5][0-9]|[01]?[0-9][0-9]?)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*,){2}([\\s]*(1|1.0|0|0.[0-9])[\\s]*)[\)]$"
; } let re = new RegExp(type); if (bgVal.match(re) == null){ return false }else{
return true } } export default { name:'progressBar', props:{ sizeOut:{ type:
Number, default:100 }, sizeIn:{ type:Number, default:80, }, size:{ type:Number,
default:10 }, colorBg:{ type:String, default:'#fff', validator:function(value){
CheckIsColor(value) } }, colorTop:{ type:String, default:'#0f0', validator:
function(value){ CheckIsColor(value) } }, colorBottom:{ type:String, default:
'#ccc', validator:function(value){ CheckIsColor(value) } }, target:{ type:Number
, default:0 }, total:{ type:Number, default:100 }, index:{ type:Number, default:
0 }, text:{ type:String, default:'进行中' }, textSize:{ type:Number, default:20 },
textcolor:{ type:String, default:'#f50', validator:function(value){ CheckIsColor
(value) } }, percentageSize:{ type:Number, default:30, }, percentageColor:{ type
:String, default:'#ff6321', validator:function(value){ CheckIsColor(value) } },
hasMask:{ type:Boolean, default:false }, encumbrances:{ type:Number, default:2 }
}, computed:{ show: function(){ if(this.target){ return ((100-this.target)*2*
this.sizeIn*3.14/100).toFixed(this.encumbrances) }else{ return ((1-this.index/
this.total)*2*this.sizeIn*3.14).toFixed(this.encumbrances) } }, percentage:
function(){ if(this.target){ return this.target.toFixed(this.encumbrances) }else
{ return ((this.index/this.total)*100).toFixed(this.encumbrances) } } }, } </
script> <style lang="less"> .yh-progress-box{ position: relative; border-radius:
50%; .yh-progress-bottom,.yh-progress-top{ position: absolute; z-index: inherit;
transform: rotate(-90deg); } } .hasmask{ width: 100%; height: 100%; background-
color:rgba(0, 0, 0, 0.3); position: fixed; top: 0; left: 0; .yh-progress-box{
top: 50%; left:50%; transform: translate(-50%,-50%); } } </style>
测试用例
<template> <progress-bar :sizeOut="100" :index="20" :total="100" /> </template>
<script> import progressBar from '@/components/progress-bar' export default {
components:{ progressBar } } </script>