vue圆形进度条组件
Vue圈进度 (vue-circle-progress)
A Vue.js component to draw animated circular progress bars.
一个Vue.js组件,用于绘制动画的圆形进度条。
Draw animated progress circle like below.
如下绘制动画进度圈。
安装 (Install)
// For Vue.js 2.0+
npm install vue2-circle-progress
用法 (Usage)
Import the module
导入模块
Register it as a component as you would any other Vue component
与其他任何Vue组件一样,将其注册为组件
Use it within your template
在模板中使用它
例 (Example)
<template>
<div id="app">
<p>
A Vue.js component to draw animated circular progress bars!
</p>
<vue-circle
:progress="50"
:size="100"
:reverse="false"
line-cap="round"
:fill="fill"
empty-fill="rgba(0, 0, 0, .1)"
:animation-start-value="0.0"
:start-angle="0"
insert-mode="append"
:thickness="5"
:show-percent="true"
@vue-circle-progress="progress"
@vue-circle-end="progress_end">
<p>Slot!</p>
</vue-circle>
</div>
</template>
<script>
import VueCircle from 'vue2-circle-progress'
export default {
components: {
VueCircle
},
data(){
return{
fill : { gradient: ["red", "green", "blue"] },
}
},
methods:{
progress(event,progress,stepValue){
console.log(stepValue);
},
progress_end(event){
console.log("Circle progress end");
}
}
}
</script>