# 步骤条 Steps

引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。

# 基础用法

第一步
上一步 下一步
基本用法

从第一步骤走到最后一步,告知用户进展

<title>基本用法</title>
<describe>从第一步骤走到最后一步,告知用户进展</describe>
<template>
    <hc-steps v-model="active" >
      <hc-step title="查询机会"></hc-step>
      <hc-step title="填写客户信息"></hc-step>
      <hc-step title="填写认购信息"></hc-step>
    </hc-steps>
    <div v-if="active===0" style="height: 40px">第一步</div>
    <div v-if="active===1" style="height: 40px">第二步</div>
    <div v-if="active===2" style="height: 40px">第三步</div>
    <hc-button @click="active--">上一步</hc-button>
    <hc-button @click="active++">下一步</hc-button>
</template>
<script>
export default {
    data: function () {
        return {
            active: 0
        }
    }
}
</script>

# 属性及事件

# HcSteps 属性

属性 说明 类型 可选值 默认值
value 激活步骤值,支持v-model方式使用 number -- --

# HcStep 属性

属性 说明 类型 可选值 默认值
title 步骤标题 string -- --
block 宽度百分比布局 boolean -- true