<>实现效果

<>实现步骤

<>1.完成初步样式

将6个部分共同组成一个二级进度条,分别设置样式,用display:flex完成布局
html部分:
<div class="step"> <!-- 第一部分 --> <div class="dot blue"></div> <div class="
step_mod"> <!-- 第二部分 --> <div class="bar blue"></div> <!-- 第三部分 --> <div class="
process"> <div class="progressCircle"> <el-progress type="circle" :stroke-width=
"15" :percentage="50" :show-text="false"></el-progress> <div class="progressText
">一级</div> </div> <div class="process_title">二级</div> </div> <!-- 第四部分 --> <div
class="bar"></div> <!-- 第五部分 --> <div class="wait">未进行</div> </div> <div class="
bar"></div> <!-- 第六部分 --> <div class="dot"></div> </div>
css部分:
.step { width: auto; margin: 40px auto; display: flex; justify-content: center;
align-items: center; .dot { width: 12px; height: 12px; border-radius: 6px;
background: #c3c3c3; } .step_mod { display: flex; justify-content: center;
align-items: center; } .process { width: 50px; height: 50px; .process_title {
text-align: center; font-size: 12px; color: #0290ff; line-height: 20px;
margin-top: 20px; white-space: nowrap; } /deep/.el-progress-circle { width: 50px
!important; height: 50px !important; } /deep/.el-progress__text { font-size:
14px!important; line-height: 20px; } } .progressText { text-align: center;
margin-top: -40px; font-size: 14px; } .wait { font-size: 14px; color: #ffffff;
line-height: 20px; background: #c3c3c3; width: 50px; height: 50px; border-radius
: 25px; text-align: center; padding: 15px 0; box-sizing: border-box; } .bar {
width: 82px; height: 4px; background: #f5f5f5; } .blue { background: #0290ff; }
}
<>2.填充数据

<!-- stageTree:记录环节信息的树; progressFlag:判断当前环节是否已完成,或正在进行;
secondValue:计算得到的进度百分比; label:一级环节名称 secondLabel:当前二级环节名称--> <div class="step">
<div class="dot blue"></div> <div class="step_mod" v-for="(item,index) in
stageTree" :key="index"> <div v-if="item.progressFlag" class="bar blue"></div> <
div v-if="item.progressFlag" class="process"> <div class="progressCircle"> <
el-progress type="circle" :stroke-width="15" :percentage="item.secondValue"
:show-text="false" ></el-progress> <div class="progressText">{{item.label}}</div
> </div> <div v-if="index===firstIndex" class="process_title">{{secondLabel}}</
div> </div> <div v-if="!item.progressFlag" class="bar"></div> <div v-if="
!item.progressFlag" class="wait">{{item.label}}</div> </div> <div class="bar"></
div> <div class="dot"></div> </div> <>data部分: data() { return { //节点信息
stageTree: [ { label: "一级 1", progressFlag: false, secondValue: 0, children: [ {
label: "二级 1-1" } ] }, { label: "一级 2", progressFlag: false, secondValue: 0,
children: [ { label: "二级 2-1" }, { label: "二级 2-2" } ] }, { label: "一级 3",
progressFlag: false, secondValue: 0, children: [ { label: "二级 3-1" }, { label:
"二级 3-2" }, { label: "二级 3-3" } ] }, { label: "一级 4", progressFlag: false,
secondValue: 0, children: [ { label: "二级 4-1" }, { label: "二级 4-2" }, { label:
"二级 4-3" }, { label: "二级 4-4" } ] } ], firstLabel: "",//一级环节名称 firstIndex: -1,
//一级环节序号 secondLine: [],//当前一级环节所对应的二级环节列表 secondLabel: "",//二级环节名称 secondIndex:
0//二级环节序号 }; },
<>源码

* 这里我为了方便方便调试,添加了环节设置的功能,完整代码如下: <template> <div> <div>二级进度条</div> <!--
stageTree:记录环节信息的树; progressFlag:判断当前环节是否已完成,或正在进行; secondValue:计算得到的进度百分比;
label:一级环节名称 secondLabel:当前二级环节名称--> <div class="step"> <div class="dot blue"></
div> <div class="step_mod" v-for="(item,index) in stageTree" :key="index"> <div
v-if="item.progressFlag" class="bar blue"></div> <div v-if="item.progressFlag"
class="process"> <div class="progressCircle"> <el-progress type="circle"
:stroke-width="15" :percentage="item.secondValue" :show-text="false" ></
el-progress> <div class="progressText">{{item.label}}</div> </div> <div v-if="
index===firstIndex" class="process_title">{{secondLabel}}</div> </div> <div v-if
="!item.progressFlag" class="bar"></div> <div v-if="!item.progressFlag" class="
wait">{{item.label}}</div> </div> <div class="bar"></div> <div class="dot"></div
> </div> <div class="testBox"> <div>环节设置:</div> <div class="flex_box"> <div
class="processLine"> 一级环节: <i class="el-icon-circle-plus-outline" @click="
addNode(1)"></i> <div class="node" v-for="(item,index) in stageTree" :key="index
"> <el-input v-model="item.label" placeholder="请输入环节名称" @focus="
focusOnfirst(item,index)"></el-input> <i class="el-icon-remove-outline" @click="
deleteNode(1,index)"></i> </div> </div> <div class="processLine"> {
{firstLabel}}的二级环节:<i class="el-icon-circle-plus-outline" @click="addNode(2)"></
i> <div class="node" v-for="(item,index) in secondLine" :key="index"> <el-input
v-model="item.label" placeholder="请输入环节名称" @focus="focusOnsecond(item,index)"></
el-input> <i class="el-icon-remove-outline" @click="deleteNode(2,index)"></i> </
div> </div> <!-- 箭头控制进度 --> <div class="processLine"> <i class="el-icon-right
btn" @click="next()"></i> <i class="el-icon-back btn" @click="back()"></i> </div
> </div> <div>使用说明:</div> <div>点击一级环节展开二级环节;</div> <div>点击二级环节设置当前环节</div> </div
> </div> </template> <script> export default { name: "Step", props: {}, data() {
return { //节点信息 stageTree: [ { label: "一级 1", progressFlag: false, secondValue:
0, children: [ { label: "二级 1-1" } ] }, { label: "一级 2", progressFlag: false,
secondValue: 0, children: [ { label: "二级 2-1" }, { label: "二级 2-2" } ] }, {
label: "一级 3", progressFlag: false, secondValue: 0, children: [ { label: "二级
3-1" }, { label: "二级 3-2" }, { label: "二级 3-3" } ] }, { label: "一级 4",
progressFlag: false, secondValue: 0, children: [ { label: "二级 4-1" }, { label:
"二级 4-2" }, { label: "二级 4-3" }, { label: "二级 4-4" } ] } ], firstLabel: "",
//一级环节名称 firstIndex: -1,//一级环节序号 secondLine: [],//当前一级环节所对应的二级环节列表 secondLabel:
"",//二级环节名称 secondIndex: 0//二级环节序号 }; }, methods: { //点击一级节点 focusOnfirst(item,
index) { this.firstIndex = index; this.firstLabel = item.label; this.secondLine
= item.children; }, //点击二级节点 focusOnsecond(item, index) { this.secondLabel =
item.label; this.stageTree.forEach((ele, No) => { ele.progressFlag = false; ele.
secondValue= 0; }); for (let i = 0; i < this.stageTree.length; i++) { this.
stageTree[i].progressFlag = true; if (i === this.firstIndex) { this.stageTree[i]
.secondValue = ((index + 1) * 100) / this.secondLine.length; break; } else {
this.stageTree[i].secondValue = 100; } } }, //增加节点 addNode(level) { if (level
=== 1) { this.stageTree.push({ label: "", progressFlag: false, secondValue: 0,
children: [] }); } else { this.secondLine.push({ label: "" }); } }, //删除节点
deleteNode(level, index) { if (level === 1) { this.stageTree.splice(index, 1); }
else { this.secondLine.splice(index, 1); } }, //回退 back() { this.secondIndex--;
if (this.secondIndex === -1) { if (this.firstIndex === 0) { this.firstIndex--;
this.secondIndex = 0; this.stageTree[0].progressFlag = false; this.stageTree[0].
secondValue= 0; return; } else if (this.firstIndex === -1) { console.log(this.
stageProgress); this.secondIndex = 0; return; } else { this.firstIndex--; this.
firstLabel= this.stageTree[this.firstIndex].label; this.secondIndex = this.
stageTree[this.firstIndex].children.length - 1; this.secondLine = this.stageTree
[this.firstIndex].children; this.secondLabel = this.secondLine[this.secondIndex]
.label; } } else { this.secondLine = this.stageTree[this.firstIndex].children;
this.secondLabel = this.secondLine[this.secondIndex].label; } console.log(this.
secondLabel); this.stageTree.forEach((ele, No) => { ele.progressFlag = false;
ele.secondValue = 0; }); for (let i = 0; i < this.stageTree.length; i++) { this.
stageTree[i].progressFlag = true; if (i === this.firstIndex) { this.stageTree[i]
.secondValue = ((this.secondIndex + 1) * 100) / this.secondLine.length; break; }
else { this.stageTree[i].secondValue = 100; } } }, //前进 next() { this.
secondIndex++; if ( this.firstIndex == -1 || this.secondIndex == this.stageTree[
this.firstIndex].children.length ) { this.firstIndex++; this.firstLabel = this.
stageTree[this.firstIndex].label; this.secondIndex = 0; this.secondLine = this.
stageTree[this.firstIndex].children; this.secondLabel = this.secondLine[this.
secondIndex].label; } else { this.secondLine = this.stageTree[this.firstIndex].
children; this.secondLabel = this.secondLine[this.secondIndex].label; } this.
stageTree.forEach((ele, No) => { ele.progressFlag = false; ele.secondValue = 0;
}); for (let i = 0; i < this.stageTree.length; i++) { this.stageTree[i].
progressFlag= true; if (i === this.firstIndex) { this.stageTree[i].secondValue =
((this.secondIndex + 1) * 100) / this.secondLine.length; break; } else { this.
stageTree[i].secondValue = 100; } } } } }; </script> <style lang="less" scoped>
.step { width: auto; margin: 40px auto; display: flex; justify-content: center;
align-items: center; .dot { width: 12px; height: 12px; border-radius: 6px;
background: #c3c3c3; } .step_mod { display: flex; justify-content: center;
align-items: center; } .process { width: 50px; height: 50px; .process_title {
text-align: center; font-size: 12px; color: #0290ff; line-height: 20px;
margin-top: 20px; white-space: nowrap; } /deep/.el-progress-circle { width: 50px
!important; height: 50px !important; } /deep/.el-progress__text { font-size:
14px!important; line-height: 20px; } } .progressText { text-align: center;
margin-top: -40px; font-size: 14px; } .wait { font-size: 14px; color: #ffffff;
line-height: 20px; background: #c3c3c3; width: 50px; height: 50px; border-radius
: 25px; text-align: center; padding: 15px 0; box-sizing: border-box; } .bar {
width: 82px; height: 4px; background: #f5f5f5; } .blue { background: #0290ff; }
} .testBox { text-align: left; .flex_box { display: flex; .processLine { margin:
20px; i { cursor: pointer; float: right; } .btn { font-size: 80px; margin: 50px
; } .node { margin: 10px 0; display: flex; align-items: baseline; } } } }
</style>

技术
©2019-2020 Toolsou All rights reserved,
Vue.js入门(五)---在vue中使用echarts词云Pandas统计分析基础_数据处理(DataFrame常用操作)element UI dialog点击dialog区域外会关闭dialog应届毕业生看过来!Java面试经典77问,看完离工作就不远了关于蓝桥杯大赛,你应该了解的那些事!mysql 分区-key分区(五)海康威视-嵌入式软件笔试题PHP Redis 监听过期的 key 事件C语言循环语句笔记详解以及练习-折半查找算法、猜数字游戏JVM概述