<div class="box3">
<el-steps direction="vertical" :active="number">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3" description="步骤完成"></el-step>
</el-steps>
</div>
<el-button type="success" @click="addStep()">增加步骤</el-button>
<el-button type="danger" @click="resize()">清除步骤</el-button>
步骤条的样式.png
/// 增加步骤条的步数
addStep() {
this.number++;
sessionStorage.setItem("key",this.number1); // 保存到本地
},
/// 清除步数
resize () {
this.number = 1;
sessionStorage.setItem("key",this.number1);
},
mounted() {
var a = parseInt(sessionStorage.getItem("key")); // 页面刷新的时候this.number 从本地取
this.number = a;
}
/*步骤条的高度*/
.box3 >>> .el-step.is-vertical {
height: 50%;
}