Steps 步骤条

拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。

效果

使用方法

<template>
  <div>
    <lc-title title="步骤条"></lc-title>
    <category title="正常流程"></category>
    <lc-steps :current="current">
      <lc-step title="已完成" content></lc-step>
      <lc-step title content="这里是该步骤的描述信息"></lc-step>
      <lc-step title="进行中" content="这里是该步骤的描述信息"></lc-step>
      <lc-step title="待进行" content="这里是该步骤的描述信息"></lc-step>
      <lc-step title="待进行" content="这里是该步骤的描述信息"></lc-step>
    </lc-steps>

    <category title="流程终止"></category>
    <lc-steps :current="current" status="error">
      <lc-step title="已完成" content="这里是该步骤的描述信息"></lc-step>
      <lc-step title="已完成" content="这里是该步骤的描述信息"></lc-step>
      <lc-step title="进行中" content="这里是该步骤的描述信息"></lc-step>
      <lc-step title="待进行" content="这里是该步骤的描述信息"></lc-step>
      <lc-step title="待进行" content="这里是该步骤的描述信息"></lc-step>
    </lc-steps>

  </div>
</template>

<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
  components: { LcTitle, Category },
  data() {
    return {
      current: 3
    };
  },
  mounted() {
  },
  methods: {
  }
};
</script>

<style lang="less" scoped>
.nut-steps {
  margin-left: 10px;
}
.next-step {
  text-align: center;
  line-height: 30px;
  color: #ffffff;
  background: #2d8cf0;
  border-radius: 3px;
}
</style>

可配置参数

lc-steps

字段	说明	类型	默认值
current	当前所在的步骤	Number	0
status	流程状态	String	“process”（可选值 “process”、”error”）

lc-step

字段	说明	类型	默认值
title	流程步骤的title	String	步骤
content	流程步骤的content	String	步骤描述