Element UI 风格步骤条组件代码示例

<template>
  <div class='step-bar'>
    <el-steps :active='activeStep' align-center>
      <el-step v-for='(step, index) in steps' :key='index' :title='step.title' :description='step.description'></el-step>
    </el-steps>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeStep: 0,
      steps: [
        { title: 'Step 1', description: 'Description 1' },
        { title: 'Step 2', description: 'Description 2' },
        { title: 'Step 3', description: 'Description 3' },
      ]
    };
  },
};
</script>
<style scoped>
.step-bar {
  margin-top: 20px;
}
</style>
<p>上述代码中，我们使用了 Element UI 的 <code>el-steps</code> 组件和 <code>el-step</code> 组件来实现步骤条效果。<code>el-steps</code> 组件的 <code>:active</code> 属性用于指定当前激活的步骤，我们使用 <code>activeStep</code> 变量来控制当前激活的步骤。<code>el-step</code> 组件的 <code>v-for</code> 指令用于循环渲染每个步骤，我们使用 <code>steps</code> 数组来存储每个步骤的标题和描述信息。</p>
<p>通过以上代码，你可以在你的 Vue.js 项目中使用这个步骤条组件，并根据需要修改步骤的标题、描述和激活的步骤。</p>