Bootstrap

vue项目中应用elementUI的步骤条+折叠面板,达到如图效果

这里写图片描述

效果就是点击某个步骤就可以展开对应的内容.步骤条和折叠面板长度也会动态改变
都是通过元素js来改变长度.
先定义一个步骤条

<div style="width:130px;margin-top:20px;float:left">
  <el-steps :space="200" direction="vertical" :active="step" process-status="process" finish-status="wait">
      <el-step @click.native="on_click(1)" title="xxx" id="one"></el-step>
      <el-step @click.native="on_click(2)" title="xx" id="two"></el-step>
      <el-step @click.native="on_click(3)" title="xx" id="three"></el-step>
</el-steps>
</div>

再来个折叠面板,步骤条和折叠面板的div放在一个大的div中,这两个div设置为左浮动float=”left”

;