Package Exports

v-circle-progress

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (v-circle-progress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

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)
    }