效果图
代码
CommonProcess.vue 进度条动态加载组件代码
<!-- 进度条组件 -->
<template>
<div class="common_process">
<div v-for="(item, index) in dataList" :key="processType + index" class="common_process_item">
<div class="common_process_item_dept cyan">
<div>
<span class="common_process_item_dept_index">NO.{
{ index + 1 }}</span>
{
{ item[bmmcField] }}
</div>
<div v-if="processType === 'jysg'">{
{ item[slField] | noDataFilter }}</div>
</div>
<div class="common_process_item_line">
<div
class="common_process_item_line_process"
:style="{ '--width': (item[slField] / total) * 100 + '%' }"
/>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CommonProcess',
components: {
},
props: {
processType: {
type: String,
// required: true
default: 'jysg'
},
dataList: {
type: Array,
// required: true
default: () => {
return [...Array(10).keys()]
.map((num) => {
return {
bmmc: '部门' + (num + 1),
sl: num
}
})
.reverse()
}
},
total: {
type: [Number, String],
// required: true
default: [...Array(10).keys()].reduce((a, b) => a + b, 0)
},
bmmcField: {
type: String,
default: 'bmmc'
},
slField: {
type: String,
default: 'sl'
}
}
}
</script>
<style lang='scss' scoped>
.common_process {
padding: 0 10px;
&_item {
padding: 7px 0;
&_dept {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
padding-right: 5px;
font-size: 13px;
&_index {
padding: 2px 3px;
border-radius: 3px;
background: linear-gradient(90deg, #236cdc 0%, #00c0ff 100%);
font-weight: bold;
color: #fff;
}
}
&_line {
height: 8px;
background-color: rgba(64, 158, 255, 0.1);
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
&_process {
position: relative;
width: var(--width);
height: 100%;
background: linear-gradient(90deg, #236cdc 0%, #00c0ff 100%);
animation: move 1s; /* 【主要代码】添加动画 */
@keyframes move {
/* 【主要代码】添加动画 */
0% {
width: 0%;
}
100% {
width: var(--width); /* 【主要代码】宽度不固定，需要计算，通过 style 属性传入 --width */
}
}
&::after {
content: '';
position: absolute;
top: -2px;
right: 0;
width: 6px;
height: 12px;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 0 10px #faad14;
}
}
}
}
}
</style>
使用 “进度条动态加载” 组件
<template>
<CommonProcess v-if="select === 'ybsg'" />
</template>
<script>
import CommonProcess from './CommonProcess'
export default {
name: 'Accident',
components: {
CommonProcess
},
}
</script>
