AsUI

Step步骤条

# 基础用法

下一步
<template>
  <div>
    <as-steps :active="active" finish-status="success">
      <as-step title="步骤 1"></as-step>
      <as-step title="步骤 2"></as-step>
      <as-step title="步骤 3"></as-step>
    </as-steps>
    <as-button style="margin-top: 12px;" @click="next">下一步</as-button>
  </div>
</template>
<script>
export default {
  name: "t-basic-step",
  data() {
    return {
      active: 0
    };
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    }
  }
}
</script>
<style>
</style>
Expand Copy

# 含状态步骤条

<template>
  <div>
    <as-steps :space="200" :active="1" finish-status="success">
      <as-step title="已完成"></as-step>
      <as-step title="进行中"></as-step>
      <as-step title="步骤 3"></as-step>
    </as-steps>
  </div>
</template>
<script>
export default {
  name: "t-state-step",
}
</script>
<style>
</style>
Expand Copy

# 含状态步骤条

<template>
  <div>
    <as-steps :active="1">
      <as-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></as-step>
      <as-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></as-step>
      <as-step title="步骤 3" description="这段就没那么长了"></as-step>
    </as-steps>
  </div>
</template>
<script>
export default {
  name: "t-desc-step",
}
</script>
<style>
</style>
Expand Copy

# 居中步骤条

<template>
  <div>
    <as-steps :active="2" align-center>
      <as-step title="步骤1" description="这是一段很长很长很长的描述性文字"></as-step>
      <as-step title="步骤2" description="这是一段很长很长很长的描述性文字"></as-step>
      <as-step title="步骤3" description="这是一段很长很长很长的描述性文字"></as-step>
      <as-step title="步骤4" description="这是一段很长很长很长的描述性文字"></as-step>
    </as-steps>
  </div>
</template>
<script>
export default {
  name: "t-center-step",
}
</script>
<style>
</style>
Expand Copy

# 带图标的步骤条

<template>
  <div>
    <as-steps :active="1">
      <as-step title="步骤 1" icon="as-icon-edit"></as-step>
      <as-step title="步骤 2" icon="as-icon-upload"></as-step>
      <as-step title="步骤 3" icon="as-icon-picture"></as-step>
    </as-steps>
  </div>
</template>
<script>
export default {
  name: "t-icon-step",
}
</script>
<style>
</style>
Expand Copy

# 竖式步骤条

<template>
  <div class="t-vertical-step-area">
    <as-steps direction="vertical" :active="1">
      <as-step title="步骤 1"></as-step>
      <as-step title="步骤 2"></as-step>
      <as-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></as-step>
    </as-steps>
  </div>
</template>
<script>
export default {
  name: "t-vertical-step",
}
</script>
<style>
.t-vertical-step-area{
  height: 300px;
}
</style>
Expand Copy

# 简洁风格的步骤条

设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。

<template>
  <div class="t-simple-step-area">
    <as-steps :active="1" simple>
      <as-step title="步骤 1" icon="el-icon-edit"></as-step>
      <as-step title="步骤 2" icon="el-icon-upload"></as-step>
      <as-step title="步骤 3" icon="el-icon-picture"></as-step>
    </as-steps>

    <as-steps :active="1" finish-status="success" simple style="margin-top: 20px">
      <as-step title="步骤 1" ></as-step>
      <as-step title="步骤 2" ></as-step>
      <as-step title="步骤 3" ></as-step>
    </as-steps>
  </div>
</template>
<script>
export default {
  name: "t-simple-step",
}
</script>
<style>
</style>
Expand Copy

# Attributes

参数 默认值 说明
space -- 每个step的间距,不填写将自适应间距。支持百分比。类型为Number/String
direction horizontal 显示方向。类型为String,可选值为vertical/horizontal
active 0 设置当前激活步骤。类型为Number/String
process-status process 设置当前步骤的状态,类型为String,可选值为wait/process/finish/error/success
finish-status finish 设置结束步骤的状态,类型为String,可选值为wait/process/finish/error/success
align-center false 进行居中对齐,类型为Boolean
simple false 是否应用简洁风格,类型为Boolean

# Slot

名称 说明
icon 自定义图标
title 自定义标题
description 自定义描述性文字

← Avatar头像 →