最近做了一個表單填寫的進度條，根據表單的填寫情況，展示他已經完成的進度。
所以，封裝了一個小組件。
子組件 progressBar.vue
<template>
<div>
<div class="xui-wrapper xui-myPromption-wrapper">
<div class="xui-mainContain pt10 bg_fff">
<div class="xui-returnCommission">
<div class="xui-process">
<i id="icon-flag" class="xui-icon-flag"></i>
<div class="xui-process-static"></div>
<div class="xui-process-active" :style="{width:doneWidth}">
<b :class="parseInt(doneWidth)<='3' ?'xiu-jindu1':'xiu-jindu'">{{doneWidth}}</b>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "progressBar",
props:{
singular:{ //單數
type: [String,Number],
default:""
},
totalCost:{ //總數
type: [String,Number],
default:""
},
},
data(){
return{
}
},
created(){
},
watch: {
singular(val, oldVal) {
this.$emit('singular',val)
},
totalCost(val){
this.$emit('totalCost',val)
},
doneWidth(val, oldVal){
},
},
computed:{
ratio:{
cache:false,
get:function(){
const r = Math.round(this.singular/this.totalCost*100)
return(r-1) + '%';
}
},
doneWidth:{
cache:false,
get:function(){
const widthPercentage = Math.round(this.singular/this.totalCost*100)
if (widthPercentage >= 100) {
return 100 + '%'
}
if (widthPercentage <= 0) {
return 0 + '%'
}
return widthPercentage + '%'
}
},
},
methods:{
},
mounted(){
}
}
</script>
<style>
.bg_fff {
background-color: #f4f4f4;
}
.xui-wrapper {
margin:0 auto;
width:100%;
max-width:750px;
/*height:100vh;*/
background-color:#efeff4;
}
.xui-myPromption-wrapper .xui-returnCommission .xui-process {
position: relative;
display: inline-block;
vertical-align: middle;
padding: 13px 0 13px;
width: 375px;
}
.xui-myPromption-wrapper .xui-process .xui-icon-flag {
position: absolute;
top: 10px;
left: 0;
width: 12px;
height: 18px;
background-size: 11px;
}
.xui-myPromption-wrapper .xui-process .xui-process-static {
width: 100%;
height: 6px;
border-radius: 10px;
/* -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); */
/* box-shadow: 0 0 5px rgba(0,0,0,0.3); */
background-color: #D0D0D0;
}
.cbor{
border: 1px solid #FFB800;
}
.xui-myPromption-wrapper .xui-process .xui-process-active {
position: absolute;
top: 13px;
left: 0;
width: 0;
height: 6px;
/* border: 1px solid #FFB800; */
border-radius: 10px;
/* background-image: linear-gradient(60deg, transparent 0rem, transparent 0.8rem, #FF8200 0.8rem, #FF8200 1.6rem, transparent 1.6rem, transparent 2.4rem, #FF8200 2.4rem); */
background-color: #FF8200;
/* background-size: 20px 38px; */
/* -box-shadow: box-shadow: 1px 1px 5px rgba(0, 140, 213, .8); */
/* box-shadow: 1px 1px 5px rgba(213, 121, 0, 0.6); */
/* -webkit-animation: process 800ms infinite linear;
animation: process 800ms infinite linear; */
}
.xiu-jindu{
/* left: 100%; */
right: 0;;
top: -4px;
position: absolute;
font-size: 7px;
font-weight: 500;
color: rgb(255, 130, 0);
line-height: 0px;
padding-top: 2px;
padding-top: 6px;
padding-left: 1px;
padding-right: 1px;
padding-bottom: 6px;
background: rgb(255, 255, 255);
border-radius: 1px;
border: 1px solid rgb(255, 130, 0);
z-index: 2;
}
.xiu-jindu1{
left: 0;
top: -4px;
position: absolute;
font-size: 7px;
font-weight: 500;
color: rgb(255, 130, 0);
line-height: 0px;
padding-top: 2px;
padding-top: 6px;
padding-left: 1px;
padding-right: 1px;
padding-bottom: 6px;
background: rgb(255, 255, 255);
border-radius: 1px;
border: 1px solid rgb(255, 130, 0);
z-index: 2;
}
.xui-myPromption-wrapper .xui-process .xui-process-active:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
border-radius: 10px;
/* background-image: linear-gradient(to bottom, rgba(213, 121, 0, 0.6), rgba(213, 121, 0, 0.6) 15%, transparent 60%, rgba(213, 121, 0, 0.6)); */
}
/* 動畫 */
/* @-webkit-keyframes process {
0% { background-position: 0 0; }
100% { background-position: 20px 0; }
}
@keyframes process {
0% { background-position: 0 0; }
100% { background-position: 20px 0; }
} */
</style>
如果想要動畫樣式的，也可以把動畫的註釋 去掉。就可以看到動畫的效果啦。
引用子組件寫法
<template>
<div>
<progressBar :singular="singular" :totalCost="totalCost"></progressBar>
<div @click="del">減</div>
<div @click="add">加</div>
</div>
</template>
<script>
import progressBar from "_c/progressBar/progressBar.vue"; //根據路徑，把組件引用進來
export default {
name: "ceshi",
components: {
progressBar
},
data() {
return {
singular: "0", //當前完成進度
totalCost: "7" //進度條總數
};
},
created() {},
methods: {
add() {
if (
Math.round((this.singular / this.totalCost) * 100) < 100 &&
Math.round((this.singular / this.totalCost) * 100) >= 0
) {
String(this.singular++);
}
if (Math.round((this.singular / this.totalCost) * 100) >= 100) {
this.singular = this.totalCost;
}
if (Math.round((this.singular / this.totalCost) * 100) < 0) {
this.singular = "0";
}
},
del() {
if (
Math.round((this.singular / this.totalCost) * 100) <= 100 &&
Math.round((this.singular / this.totalCost) * 100) > 0
) {
String(this.singular--);
}
if (Math.round((this.singular / this.totalCost) * 100) <= 0) {
this.singular = "0";
}
if (Math.round((this.singular / this.totalCost) * 100) > 100) {
this.singular = this.totalCost;
}
}
}
};
</script>
需要傳兩個值，singular，當前完成的進度，totalCost 所有項的總數。
這只是一個測試demo。
思路：表單填寫完一項後，把當前進度+1，知道當前完成項和所有項相等時，則已全部完成。