wqr-circleprocessbar
v1.0.2
Published
基于vue.js的圆形进度条组件
Downloads
1
Readme
圆形进度条组件使用简介:
安装:npm i wqr-circleprocessbar -S/--save
安装:yarn add wqr-circleprocessbar -S/--save
使用:import circleProcessBar from 'wqr-circleprocessbar'
说明:
该组件为圆形进度条,单纯用来展示(使用场景就是圆形进度咯)
使用概览:
new Vue({
el: '#body',
data:{
style: {
color: '#66d555', //进度条颜色
borderWidth: 6, //进度条宽度
wrapWidthAndHeight: 100, //进度条盒子宽高
},
percent:0
},
components:{
circleProcessbar
}
})
使用方法:
<circle-process-bar :percent="70" :process-style="style" :left-start="-135" :right-end="45" :is-bottom="false">
<div class="progress">
<span>剩余</span>
<span>{{percent}}%</span>
</div>
</circle-process-bar>
参数percent:表示进度条的进度,这是该组件的核心参数(Number类型,必传,默认值为0)
参数process-style:表示进度条的相关样式(Object类型,非必传,默认值如下)
如:
style: {
color: 'green',
borderWidth: 5,
wrapWidthAndHeight: 80,
}
//一般场景可不用考虑(碰到了特殊场景可联系组件提供者)
参数left-start:表示左侧进度的开始角度(因为这里的整个圆形进度是通过左右两半合起来的效果)。(非必传,Number类型,默认值为
-135)
//一般场景可不用考虑(碰到了特殊场景可联系组件提供者)
参数right-end:表示右侧进度的结束角度(因为这里的整个圆形进度是通过左右两半合起来的效果)。(非必传,Number类型,默认为45)
参数is-bottom:表示进度条从底部开始旋转还是从顶部开始旋转。(非必传,Boolean类型,默认为true,从底部开始旋转;false为从顶部
开始旋转)
标签: (替换组件中<slot></slot>标签中的内容,以便可以灵活展示进度)
<div class="progress">
<span>剩余</span>
<span>{{percent}}%</span>
</div>
Demo:旋转的进度条
new Vue({
el: '#body',
data:{
style: {
color: '#66d555',
borderWidth: 6,
wrapWidthAndHeight: 100,
},
percent:0
},
created() {
this.go()
},
methods: {
go(){
let timer=setInterval(()=>{ //动态改变进度条的进度,使其有旋转进度动态效果
this.percent+=1
if(this.percent==100){
clearInterval(timer)
}
},50)
}
},
components:{
circleProcessBar
}
})
<circle-process-bar :percent="percent" :process-style="style" :is-bottom="false"></circle-process-bar>
效果如下:(如果demo效果图在npm不可见,请移步到GitHub上查看效果)
好了,到此结束,去完成你的圆形进度条吧!
AuthorProfile:
Mail:[email protected]
Github:WangQiangrong 欢迎 Fork 并提出宝贵意见,赏个star再好不过了,哈哈!!
NPM:575201314