ant design vue steps 步骤条用法

ant design vue steps 步骤条基本用法,引导用户按照指定的流程完成任务。

基础用法

例子

<template>
   <div class="steps">
  <a-steps :current="1" size="small">
    <a-step> 
      <template slot="title">
        注册
      </template>
      <span slot="description">输入用户名和密码</span>
    </a-step>
    <a-step title="手机号" description="验证手机号" ></a-step>
    <a-step title="邮箱" description="验证工作邮箱" ></a-step>
    <a-step title="完成" description="完成账号注册"></a-step>
  </a-steps>
   </div>
</template>

迷你样式

迷你版设置 <a-steps size="small"> 即可

例子

<template>
   <div class="steps">
  <a-steps :current="1" size="small">
    <a-step> 
      <template slot="title">
        注册
      </template>
      <span slot="description">输入用户名和密码</span>
    </a-step>
    <a-step title="手机号" description="验证手机号" ></a-step>
    <a-step title="邮箱" description="验证工作邮箱" ></a-step>
    <a-step title="完成" description="完成账号注册"></a-step>
  </a-steps>
   </div>
</template>

竖直方向

垂直方向<a-steps direction="vertical"> 即可

例子

<template>
    <div class="steps">
        <a-steps :current="1" direction="vertical">
            <a-step>
                <template slot="title">
                    注册
                </template>
                <span slot="description">输入用户名和密码</span>
            </a-step>
            <a-step title="手机号" description="验证手机号"></a-step>
            <a-step title="邮箱" description="验证工作邮箱"></a-step>
            <a-step title="完成" description="完成账号注册"></a-step>
        </a-steps>
    </div>
</template>

错误状态

垂直方向<a-steps status="error"> 即可

例子

<template>
   <div class="steps">
  <a-steps :current="1"  status="error">
    <a-step> 
      <template slot="title">
        注册
      </template>
      <span slot="description">输入用户名和密码</span>
    </a-step>
    <a-step title="手机号" description="验证手机号" ></a-step>
    <a-step title="邮箱"  status="error" description="验证工作邮箱" ></a-step>
    <a-step title="完成" description="完成账号注册"></a-step>
  </a-steps>
   </div>
</template>

点状步骤条

点状步骤条node.js webpack方式属性名称为progressDot ，浏览器方式属性名称 progress-dot 

例子

<template>
   <div class="steps">
  <a-steps :current="1" progress-dot >
    <a-step> 
      <template slot="title">
        注册
      </template>
      <span slot="description">输入用户名和密码</span>
    </a-step>
    <a-step title="手机号" description="验证手机号" ></a-step>
    <a-step title="邮箱"  description="验证工作邮箱" ></a-step>
    <a-step title="完成" description="完成账号注册"></a-step>
  </a-steps>
   </div>
</template>

自定义点状步骤条

例子