npm address in here : https://www.npmjs.com/package/v-circle-progress
1 . Circle progress
2 . Support customization, such as progress bar color, ring size, position, text...
3 . .....(There will be more follow ups)
npm i v-circle-progress
import vCircleProgress from 'v-circle-progress'
export default {
components: {
vCircleProgress,
},
}
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 | 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 |
When you press the circle viewDetails button,trigger jumpPageHandle()
jumpPageHandle(rate) {
console.log('current rate is :', rate)
}