vue 自定义组件：ProcessBar (堆叠式进度条)
程序员文章站
2022-07-06 16:47:49
使用vue做界面的时候需要用到类似bootstrap堆叠式进度条，前台使用ElementUI，为了防止有样式冲突，自己定义一个类似这样的进度条。
{{ getProcessDesc(processValue[0]) }}
<....
使用vue做界面的时候需要用到类似bootstrap堆叠式进度条，前台使用ElementUI，为了防止有样式冲突，自己定义一个类似这样的进度条。
<template>
<div id="ProcessBar" class="pB_Container">
<div class="first" :style="error">
{{ getProcessDesc(processValue[0]) }}
</div>
<div class="second" :style="cancel">
{{ getProcessDesc(processValue[1]) }}
</div>
<div class="third" :style="success">
{{ getProcessDesc(processValue[2]) }}
</div>
<div class="last" :style="notDone">
{{ getProcessDesc(processValue[3]) }}
</div>
</div>
</template>
<script>
export default {
name: "ProcessBar",
props: {
processValue: {
type: Array,
default: [0],
},
},
data() {
return {
error: {
width: this.processValue[0] + "%",
},
cancel: {
width: this.processValue[1] + "%",
},
success: {
width: this.processValue[2] + "%",
},
notDone: {
width: this.processValue[3] + "%",
},
};
},
components: {},
methods: {
getProcessDesc(data) {
return data == 0 ? " " : data + "%";
},
},
};
</script>
<style scoped>
.pB_Container {
width: 100%;
background-color: #f5f5f5;
height: 20px;
line-height: 20px;
text-align: right;
overflow: hidden;
color: white;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
}
.pB_Container div {
float: left;
border-radius: 8px;
}
.first {
background-color: #ea6b66;
padding-right:10px
}
.second {
background-color: #ffd966;
padding-right:10px
}
.third {
background-color: #7ea6e0;
padding-right:10px
}
.last {
background-color: white;
padding-right:10px
}
</style>
在父级中引入组件 直接调用：
<template>
<div class="pB_Container">
<processBar v-bind="processBarModel" />
</div>
</template>
<script>
import processBar from "../components/processPar";
export default {
name: "Home",
components: {
processBar,
},
data() {
return {
processBarModel: {
processValue: [10, 40, 20, 0]//此处是每个进度的值
},
};
},
};
</script>
案例只设置了4级进度 ， 没有根据值的个数来循环加载进度个数，待优化。。。。
本文地址：https://blog.csdn.net/fwq_17802927858/article/details/107158175