最近开发钉钉的项目，UI使用了iview库，其中有一个折叠面板的效果需要加进度条，效果如下：
效果图.png
稍微研究了一下，很容易就实现了：
<template>
<div class="wrap">
<Collapse accordion>
<Panel v-for="(item,k) in listData.data.projects" :key="k+'-project'" :name="''+k+1" class="txt-left">
{{item.projectName}}
<span style="position:absolute;top:0;right:0;color:green;width:200px">{{item.projectManHour}}/{{item.projectOvertimeHour}}</span>
<span style="position:absolute;top:0;right:0;color:orangered;width:100px;">{{item.projectProgress}}%</span>
<p slot="content">
<List>
<ListItem v-for="(val,index) in item['users']" :key="index+'-task'">
<ListItemMeta :title="val['name']"/>
<template slot="action">
<li v-if="val['complete']">
<span style="color:green;">已提交</span>
</li>
<li v-if="!val['complete']">
<span style="color:red;">未提交</span>
</li>
</template>
</ListItem>
</List>
</p>
<div class="progress-mask" :style="{width:item.projectProgress+'%'}">
</div>
</Panel>
</Collapse>
</div>
</template>
<script>
export default {
name: "groupWeek",
mounted() {
this.getDetail()
},
methods: {
getDetail() {
this.listData = {
"code": 0,
"data": {
"projects": [
{
"projectId": 1,
"projectName": "项目1",
"projectProgress": 90,
"projectOvertimeHour": 2.5,
"projectManHour": 19,
"users": [
{
"complete":true,
"name": "张三",
"userId": 1,
},
{
"complete":false,
"name": "李四",
"userId": 2,
},
]
},
{
"projectId": 2,
"projectManHour": 13,
"projectName": "项目2",
"projectOvertimeHour": 4.5,
"projectProgress": 40,
"users": [
{
"complete":false,
"name": "jack",
"userId": 3,
},
{
"complete":false,
"name": "lily",
"userId": 4,
},
{
"complete":true,
"name": "tom",
"userId": 5,
},
]
},
],
},
"desc": "success"
}
}
},
data() {
return {
listData:{}
}
}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 100%;
/*background:#F7F7F7;*/
background: #fff;
}
.progress-mask {
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #57a3f3;
opacity: 0.3;
}
.txt-left {
text-align: left;
font-weight: bolder;
}
</style>
主要是利用了一个绝对定位的蒙层，结合透明的背景色即可实现。
网友评论