第一种,悬浮选显示进度条,如果不需要悬浮可以 showTip为true,这样会导致菜单折叠进度条位置不变,如果悬浮显示就没有问题,
<template>
<div :style="{width:width+'px'}" class="processBox" @mouseover="showTip=true" @mouseleave="showTip=false" >
<div :style="{width:width+'px'}" class="bgBox">
<template v-for="n in cols">
<span ref="bg" :key="n" :style="{width:colWidth+'px',marginRight:colWidth+'px'}" class="bg" style="background-color:#f2f2f2" />
</template>
<div :style="{width:width+'px'}" class="qgBox">
<template v-for="n in colsActive">
<el-tooltip v-if="n=== colsActive" v-model="showTip" :manual="true" :key="n" :content="percent+'%'"
popper-class="processTip" effect="light" placement="top">
<span ref="qg" :style="{width:colWidth+'px',marginRight:colWidth+'px',backgroundColor:bgColor}" class="qg" />
</el-tooltip>
<span v-else ref="qg" :key="n" :style="{width:colWidth+'px',marginRight:colWidth+'px',
backgroundColor:bgColor}" class="qg" />
</template>
</div>
</div>
</div>
</template>
js
props: {
// 注:此宽度按cols进行等分!若进度条间距不均衡,可适当修改值。
width: {
type: Number,
default: 600
},
// 等分的竖条。如果width比较大,如1920.则这里cols可以设大点。
cols: {
type: Number,
default: 36
},
// 百分比
percent: {
type: Number,
default: 0
},
// 背景色
bgColor: {
type: String,
default: '#37b588'
}
},
data() {
return {
showTip: false
}
},
computed: {
// 激活的竖条
colsActive() {
return parseInt(this.percent / (100 / this.cols))
},
// 单个竖条宽度
colWidth() {
return (this.width / this.cols / 2)
}
}
}
css
.processBox {
padding:4px 0 4px 8px !important; //因为旋转,导致左,上间距不同。
box-sizing: content-box;
border:1px solid #ddd;
.qgBox,
.bgBox {
display: flex;
/* 默认就是下面此属性
flex-wrap:nowrap; //不换行
justify-content: flex-start ; //左对齐
*/
}
.bgBox {
position: relative;
height: 14px;
}
.qgBox {
position: absolute;top:0px;left:0;
width:100%; height: 100%;
}
.bg,
.qg {
/* flex: 0 0 auto ; */
display: inline-block;
height:100%;
transform: skewX(-30deg); //倾斜
}
}
第二种,永远显示进度条,不涉及悬浮,菜单折叠也没问题
**html**
<template>
<div :style="{width:width+'px'}" class="processBox">
<div :style="{width:width+'px'}" class="bgBox">
<template v-for="n in cols">
<span ref="bg" :key="n" :style="{width:colWidth+'px',marginRight:colWidth+'px'}"
class="bg" style="background-color:#f2f2f2"/>
</template>
<div :style="{width:width+'px'}" class="qgBox">
<template v-for="n in colsActive">
<div ref="qg" :key="n" :style="{width:colWidth+'px',marginRight:colWidth+'px',backgroundColor:bgColor}"
class="qg">
<div v-if="n=== colsActive" :key="n" :class="processTipBoo ? 'processTipGreen': 'processTipRed'">
{{ percent }}%
</div>
</div>
</template>
</div>
</div>
</div>
</template>
**js**
<script>
export default {
props: {
// 注:此宽度按cols进行等分!若进度条间距不均衡,可适当修改值。
width: {
type: Number,
default: 600
},
// 等分竖条
cols: {
type: Number,
default: 48
},
// 百分比
percent: {
type: Number,
default: 0
},
// 背景色
bgColor: {
type: String,
default: '#37b588'
},
processTipBoo: {
type: Boolean,
default: true
}
},
data() {
return {
showTip: true
}
},
computed: {
// 激活的竖条
colsActive() {
return parseInt (this.percent / (100 / this.cols))
},
// 单个竖条宽度
colWidth() {
return (this.width / this.cols / 2)
}
}
}
</script>
<script>
export default {
props: {
// 注:此宽度按cols进行等分!若进度条间距不均衡,可适当修改值。
width: {
type: Number,
default: 600
},
// 等分竖条
cols: {
type: Number,
default: 48
},
// 百分比
percent: {
type: Number,
default: 0
},
// 背景色
bgColor: {
type: String,
default: '#37b588'
},
processTipBoo: {
type: Boolean,
default: true
}
},
data() {
return {
showTip: true
}
},
computed: {
// 激活的竖条
colsActive() {
return parseInt (this.percent / (100 / this.cols))
},
// 单个竖条宽度
colWidth() {
return (this.width / this.cols / 2)
}
}
}
</script>
**css**
<style scoped lang="scss">
.processBox {
padding: 4px 0 4px 8px !important; //因为旋转,导致左,上间距不同。
box-sizing: content-box;
border: 1px solid #ddd;
margin-top: 10px;
.qgBox,
.bgBox {
display: flex;
/* 默认就是下面此属性
flex-wrap:nowrap; //不换行
justify-content: flex-start ; //左对齐
*/
}
.bgBox {
position: relative;
height: 14px;
}
.qgBox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg,
.qg {
position: relative;
display: inline-block;
height: 100%;
transform: skewX(-30deg); //倾斜
}
.processTipGreen, .processTipRed {
color: #64ae8f;
font-weight: bold;
font-size: 15px;
z-index: 99;
position: absolute;
bottom: 20px;
left: 0;
margin-left: -35px;
height: 30px;
line-height: 30px;
width: 55px;
text-align: center;
padding-left: 5px;
transform: skewX(30deg); //倾斜
background: url("../assets/img/bg.png"); 悬浮背景图片
background-size: 100%;
}
.processTipRed {
color: #da5953;
}
}
</style>