element里的步骤条做成步骤1是直线向右步骤2是直线向下步骤3直线向左的案例

可以使用element-ui中的Steps组件来实现这个效果。具体步骤如下：

1. 在Vue组件中引入Steps组件。

<template>
  <div>
    <el-steps direction="horizontal">
      <el-step title="步骤1"></el-step>
      <el-step title="步骤2"></el-step>
      <el-step title="步骤3"></el-step>
    </el-steps>
  </div>
</template>

<script>
import { Steps, Step } from 'element-ui';

export default {
  components: {
    Steps,
    Step,
  },
};
</script>

2. 设置Steps组件的direction属性为horizontal，表示水平方向展示步骤条。

3. 通过修改每个Step组件的icon属性来实现不同步骤的图标方向。具体设置如下：

<el-steps direction="horizontal">
  <el-step title="步骤1" icon="el-icon-arrow-right"></el-step>
  <el-step title="步骤2" icon="el-icon-arrow-down"></el-step>
  <el-step title="步骤3" icon="el-icon-arrow-left"></el-step>
</el-steps>

其中，el-icon-arrow-right表示向右的箭头，el-icon-arrow-down表示向下的箭头，el-icon-arrow-left表示向左的箭头。

通过以上步骤，就可以实现步骤1是直线向右、步骤2是直线向下、步骤3直线向左的效果了。