@hemy-progress/vue

hemy-progress在vue中使用

---

文档

Home

• JS
• React
• Vue
• Vue3

安装

通过 npm

npm install @hemy-progress/vue

基本使用

import HemyProgress from '@hemy-progress/vue'
export default {
  components: { HemyProgress }
}

type:String 和 percentage:Number 必填 type 支持以下值

• line 线条
• circle 环形
• rect 矩形
• ellipse 椭圆
• path 自定义图形,d 值必填

<HemyProgress type="circle" :percentage="60" />

自定义图形大小颜色配置

• strokeWidth,backStrokewidth 进度条和背景的宽度
• strokeColor,backStrokeColor 进度条和背景的颜色
• fillColor: 填充颜色
• textStyle: 显示文字的样式
• lineHeight: type=line 时,进度条高度
• radius: type=circle 时,circle 的半径大小
• borderRadius: type=line,rect 时的圆角大小

更多请查看API 使用介绍

<HemyProgress
  type="circle"
  :percentage="60"
  :radius="80"
  strokeColor="red"
  fillColor="#D7BDE2"
  backStrokeColor="#F5EEF8"
  :strokeWidth="20"
  :backStrokeWidth="20"
  strokeLinecap="round"
  :textStyle="{ fontSize: '20px', color: 'green' }"
/>

进度条颜色可传入一个颜色数组 如 strokeColor=['green','blue','yellow','orange','red'],在进度 0-20,20-40,40-60,60-80,80-100 时分别显示'green','blue','yellow','orange','red'

<HemyProgress
  type="circle"
  :percentage="percentage"
  :radius="80"
  :strokeColor="['green', 'blue', 'yellow', 'orange', 'red']"
  backStrokeColor="#F5EEF8"
  :strokeWidth="20"
  :backStrokeWidth="20"
  strokeLinecap="round"
/>
<button @click="increase">+</button>
<button @click="decrease">-</button>

  data() {
    return {
      percentage: 50
    }
  },
  methods: {
    decrease() {
      this.percentage -= 10
      if (this.percentage <= 0) {
        this.percentage = 0
      }
    },
    increase() {
      this.percentage += 10
      if (this.percentage >= 100) {
        this.percentage = 100
      }
    }
  }

虚线样式

• isDashed:Boolean 开启虚线
• dashedLength:Number 虚线长度
• dashedDistance:Number 虚线间隔
• strokeLinecap 默认设置,其他值会加宽虚线宽度,导致相邻间虚线会重合 当 type 为 line 时,虚线需要设置合适虚线长度和虚线间隔,以便最后一个虚线刚好落在容器的最后面,例:虚线宽度和间隔都为 5px,则进度条(容器)总宽度可以设为 105px 115px 125px...

<div class="item" style="width: 205px">
  <HemyProgress type="line" :percentage="60" :isDashed="true" :borderRadius="20" />
</div>

自定义图形

• type=path
• d 值必填
• pathLength 自定义图形路径的总长度,如果存在，路径将进行缩放，以便计算各点相当于此值的路径长度

<HemyProgress
  type="path"
  :percentage="60"
  d="m79.41006,31.57006l-10.63746,0c0,0 -8.2736,-0.70702 -10.63746,8.48402c-4.2107,6.62803 -12.07794,3.7117 -14.18325,6.36297c-2.32697,0 -7.68263,1.23723 -7.09167,4.24192c0.59097,3.00478 2.36394,3.53499 1.7729,4.24201c-0.59097,0.70702 -2.21614,15.2005 13.29684,14.84699c0,0 1.62517,4.24192 8.86456,0c0,0 1.6251,-1.59074 4.4322,1.06043c2.80718,2.65127 8.42132,4.59552 9.75105,4.24201c1.32965,-0.35351 9.75097,16.79115 9.75097,41.35929c0,24.56824 11.37622,41.5361 15.06974,42.41991c0,0 8.97531,34.20096 9.30773,64.69021c0,0 2.21614,12.90274 -7.53483,12.72594c-5.26331,5.23622 -7.59028,8.81539 -4.43228,8.48402c0,0 1.2189,2.38602 3.54579,2.12096c1.00765,-0.43052 -8.14428,7.82118 -4.43228,7.42349c0,0 1.62525,5.65595 7.97807,2.12096c0,0 9.75105,1.06053 10.63746,-6.36297c0.88649,-7.42349 1.32973,-19.48659 5.31877,-18.02847c0,0 0.59089,-59.21097 5.31869,-63.62968c0,0 23.48477,2.31924 50.52791,-16.96795c7.68263,-5.47924 15.51291,-13.60975 16.84256,5.30244c1.32973,18.9122 25.11623,34.64291 28.36658,45.6013c3.25035,10.95849 5.02325,7.06999 4.4322,32.87537c0,0 -5.61413,-1.59074 -9.75097,4.24201c-2.65938,3.18148 0.88649,3.18148 0.88649,3.18148c0,0 -2.06842,2.47447 4.43228,2.12105c0,0 0.88641,1.19296 5.31869,0c0,0 7.38711,0.53022 6.20518,-6.36297c0,0 0.44324,-39.23843 2.65938,-37.11738c2.21614,2.12096 13.59229,14.49339 13.29677,41.35929c0,0 -5.02325,0.88372 -5.31869,7.42349c0,0 -2.51158,3.35819 0.88641,4.24201c0,0 4.76469,1.45812 6.20518,0c0,0 6.05753,2.47447 6.20518,-6.36306c0.14772,-8.83744 -4.87545,-39.5034 -2.65931,-46.66174c0,0 -19.05878,-13.25625 -22.1614,-54.08532c0,0 8.86456,34.64291 37.23114,28.63336c0,0 2.06842,-1.06043 -0.88649,-2.12096c-2.95491,-1.06053 -26.29816,2.65127 -31.91238,-31.81484c-4.09987,-24.6566 -0.99724,-27.30777 -14.18325,-37.11738c-17.72905,-20.28196 -61.90406,0.17671 -75.34854,-6.36297c-12.41036,-7.42349 -12.8536,-7.55603 -26.59361,-12.72594c-14.0725,-8.88171 -11.67159,-19.08891 -22.16133,-32.87537c-8.03353,-12.92478 -8.1258,-11.4887 -8.86456,-12.72594c-0.73877,-1.23733 -0.14772,-7.06999 -9.75097,-8.48402z"
  :pathLength="800"
  strokeLinecap="round"
  strokeLinejoin="round"
  :showText="false"
/>

自定义显示内容(插槽)

<HemyProgress type="circle" :percentage="60">
  <div style="text-align: center">
    <img src="./assets/logo.png" style="width: 50%; height: 100%" />
    <div>插槽</div>
  </div>
</HemyProgress>

API 使用介绍

表格	值类型	是否必填	描述	默认值
type	String	否	进度条类型,line=线条,circle=环形,ellipse=椭圆,rect=矩形,path=自定义图形	line
percentage	Number	是	进度条百分比	100
fillColor	String	否	闭合图形填充颜色,type!==line生效	none
strokeWidth	Number	否	进度条宽度	10
strokeColor	String,Function,Array	否	进度条颜色,可接受字符串,参数为percentage的函数,数组, ['#f56c6c','#e6a23c','#5cb87a','#1989fa','#6f7ad3'] 或者 [ {color: '#f56c6c', percentage: 20}, {color: '#e6a23c', percentage: 40}, {color: '#5cb87a', percentage: 60}, {color: '#1989fa', percentage: 80}, {color: '#6f7ad3', percentage: 100} ]	#409eff
backStrokeColor	String	否	背景进度条颜色	#eee
backStrokewidth	Number	否	背景进度条宽度	5
textStyle	Object	否	文字样式,例:{color:'red',fontSize:'25px'}	{}
showText	Boolean	否	是否显示文字	true
format	function(percentage)	否	自定义进度条文字内容
width	Number	否	画布宽,type=path时,会自动计算画布宽高	200
height	Number	否	画布高,type=circle时,height=width	200
strokeLinecap	String	否	环形条线帽,butt:正常结尾,round:圆润,square:两端为方形	round
strokeLinejoin	String	否	线段连接处的样式,miter:正常连接,round:圆润,bevel:切除连接处的尖尖部分	miter
strokeMiterlimit	Number	否	连接处宽度和线条宽度的比	4
radius	Number	否	环形半径	50
isFan	Boolean	否	是否为扇形,type=circle时生效	false
borderRadius	Number	否	type=line和rect的圆角半径	0
rx	Number	否	type=ellispe椭圆时的长半轴	100
ry	Number	否	type=ellispe椭圆时的短半轴	50
pathLength	Number	否	自定义图形路径的总长度,如果存在，路径将进行缩放，以便计算各点相当于此值的路径长度	1000
d	String	否	当type=path,图形的定义路径,必填
isDashed	Boolean	否	进度条是否为虚线	false
isBackDashed	Boolean	否	背景是否为虚线	true
dashedLength	Number	否	虚线长度	5
dashedDistance	Number	否	虚线间隔	5
isTransition	Boolean	否	是否有过度动画	true
lineHeight	Number	否	type=line时的高度	30