v-circle-progress

npm address

npm address in here : https://www.npmjs.com/package/v-circle-progress

Explain

1 . Circle progress

2 . Support customization, such as progress bar color, ring size, position, text...

3 . .....(There will be more follow ups)

---

Usage

1.1 Installation

  npm i v-circle-progress

1.2 ES6 Import

import vCircleProgress from 'v-circle-progress'

export default {
	components: {
		vCircleProgress,
	},
}

Basic Example

html

<template>
	<div>
		<vCircleprogress
			:title="title"
			:content="content"
			:viewDetails="viewDetails"
			:rate="currentRate"
			:lineColor="lineColor"
			:backColor="backColor"
			:width="width"
			@jumpPage="jumpPageHandle"
		/>
	</div>
</template>

js

import vCircleProgress from 'v-circle-progress'

export default {
	components: {
		vCircleProgress,
	},
	data() {
		return {
			title: '剩余流量',
			content: '100GB',
			viewDetails: '查看详情',
			currentRate: 0.5,
			width: 150,
			lineColor: '#42b983',
			backColor: 'grey',
			cssStyle: {
				titleColor: 'black',
				textColor: '#42b983',
				viewDetailsColor: '#42b983',
			},
		}
	},
	methods: {
		// handle
		jumpPageHandle(val) {
			console.log('val:',val)
		}
	},
}

Props

props	type	default	description
title	String	剩余流量	Progress bar Title
content	String	100GB	Progress bar Content
viewDetails	String	查看详情	Button Text
currentRate	Number	0.5	Progress current rate
width	Number	150	Circle size
lineColor	String	#42b983	Progress bar color
backColor	String	grey	Progress bar backColor
cssStyle	Object	{}	Circle Style

---

Here is the props of **cssStyle**

props	type	default	description
titleColor	String	black	title text color
textColor	String	#42b983	text color
viewDetailsColor	String	#42b983	Button background color

Event

When you press the circle viewDetails button，trigger jumpPageHandle()

    jumpPageHandle(rate) {
      console.log('current rate is :', rate)
    }