vue圆环进度条_vue圆环形进度条组件

1.先来个圆形背景，为了后续方便定位，请给它安排上position属性。

CircleProgress.vue

export default {

name: "circle-progress"

};

.circle-progress {

position: relative;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: #5140b4;

border-radius: 100%;

overflow: hidden; // 这个属性十分关键，超过的都隐藏

}

在调用的父组件里设置了长宽为100px

2.新增两个div，一个用来做进度条，另一个用来放内容。

.circle-progress {

position: relative;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: #5140b4;

border-radius: 100%;

overflow: hidden;

.progress, .content {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

}

3.进度条部分

将圆分割成四等分，每一份都占四分之一(0.25)，角度都为90度。顺时针写样式。

block1

block2

block3

block4

2.都给他们加上背景色，为进度条的颜色。

#64d3f6

3.每一块里都加上遮挡层，遮挡层颜色与背景色相同，设定样式以背景圆的圆心为旋转点。

第一块的旋转中心应该为左下角

4.给每一块的modal都加上v-if属性，只有当比例小于这一块才显示modal层。

例如：进度(rate)为0.25，第一块modal不显示(不满足rate小于0.25)，第二块modal显示(rate < 0.5)，

第三块modal显示(rate < 0.75)，第四块modal显示(rate < 1)；

5.加上动态样式

① 顺时针第一块，右上角那块(范围应该为0~0.25)：

如果进度(rate)大于等于0.2