elementUi el-steps步骤条封装成能多行展示

在Element UI中，el-steps组件默认是不支持多行显示的。如果需要实现多行显示的步骤条，可以考虑自定义组件或使用第三方库。

以下是一个简单的自定义组件示例，用于实现多行显示的步骤条：

<template>
  <div class="multi-step">
    <div
      class="step"
      v-for="(step, index) in steps"
      :key="index"
      :class="{ 'is-active': activeStep === index }"
    >
      <div class="step-number">{{ index + 1 }}</div>
      <div class="step-content">{{ step.title }}</div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'MultiStep',
  props: {
    steps: Array,
    activeStep: Number
  }
};
</script>
 
<style scoped>
.multi-step {
  display: flex;
  flex-wrap: wrap;
}
 
.step {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 5px;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
 
.step-number {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: #fff;
  border-radius: 50%;
  color: #666;
}
 
.step-content {
  margin-left: 10px;
  color: #333;
}
 
.is-active {
  border-color: #409eff;
  box-shadow: 0 0 4px rgba(25, 118, 210, 0.5);
}
</style>

使用该组件时，你需要传入步骤数组和当前激活的步骤索引：

<template>
  <multi-step
    :steps="[
      { title: '步骤一' },
      { title: '步骤二' },
      { title: '步骤三' },
      { title: '步骤四' }
    ]"
    :active-step="1"
  />
</template>
 
<script>
import MultiStep from './MultiStep.vue';
 
export default {
  components: {
    MultiStep
  }
};
</script>

这个自定义组件允许你通过传入不同的steps和activeStep来控制步骤条的显示。你可以根据需要调整样式和功能。