Nocturnal Parakeet Monitor

    v-circle-progress

    1.0.2 • Public • Published

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

    Install

    npm i v-circle-progress

    DownloadsWeekly Downloads

    2

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    71.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • vittore_zhang