v-circle-progress v1.0.2

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

Here is the props of **cssStyle**

Event

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

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