ant design vue steps 自定义图标和html内容

ant design vue steps 步骤条允许用户自定义图标和html内容。

自定义图标

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

自定义html内容

<template>
    <div class="steps">
        <a-steps :current="1">
            <a-step>
                <template slot="title">
                    <div class="red">这里可以是html内容</div>
                </template>
                <template slot="description">
                    <div class="red">输入用户名和密码</div>
                </template>
                <a-icon type="user" slot="icon"></a-icon>
            </a-step>
            <a-step title="手机号" description="验证手机号">
                <a-icon type="solution" slot="icon"></a-icon>
            </a-step>
            <a-step title="邮箱" description="验证工作邮箱">
                <a-icon type="loading" slot="icon"></a-icon>
            </a-step>
            <a-step title="完成" description="完成账号注册">
                <a-icon type="smile-o" slot="icon"></a-icon>
            </a-step>
        </a-steps>
    </div>
</template>

例子