steps（步骤条）

基础用法

示例：

代码示例：

v-steps和v-step需要结合起来使用

<template>
  <div class="bs-bg-color-white w640">
    <v-steps :current="step" @append="handleAppend" @remove="handleRemove">
      <v-step title="步骤一" content="步骤一内容"></v-step>
      <v-step title="步骤二"></v-step>
      <v-step title="步骤三"></v-step>
    </v-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      step: 0, // 当前步骤
    };
  },
  methods: {
    handleAppend() {
      console.log('Append');
      // 步骤条组件渲染时触发
    },
    handleRemove() {
      console.log('Remove');
      // 步骤条组件销毁时触发
    },
  },
};
</script>

属性（v-steps）：

参数	说明	类型	可选值	默认值
current	当前步骤	Number	-	0
status	步骤条状态	String	'wait', 'process', 'finish', 'error'	'process'
size	步骤条大小	String	'small'	''
direction	步骤条方向	String	'horizontal', 'vertical'	'horizontal'

属性（v-step）：

参数	说明	类型	可选值	默认值
status	步骤条状态	String	'wait', 'process', 'finish', 'error'	'process'
title	步骤条文字	String	-	''
content	步骤条下方内容	String	-	''
icon	步骤条图标	String	-	''

事件：

事件名	说明	参数	参数说明
append	步骤条渲染时触发（事件挂到v-steps上，但由内部的v-step触发）	-	-
remove	步骤条销毁时触发（事件挂到v-steps上，但由内部的v-step触发）	-	-

插槽：

插槽名称	说明
icon	步骤条图标插槽，可以在图标位置自定义内容
title	步骤条名称插槽，可以在名称位置自定义内容
content	步骤条内容插槽，可以在内容位置自定义内容