Steps 步骤条

使用指南

引入方式

import { Steps,Step } from 'feart';

components: {
  'fe-steps': Steps,
  'fe-step': Step
}

data() {
    return {
      currentIndex: 3,
      steps1: [
        {
          title: '标题标题标题标题标题标题标题标题标题标题',
          description:
            '内容详情，根据实际安排内容详情，根据实际文案安排内容详情，根据实际安排内文案安排',
        },
        {
          title: '标题',
          description: '内容详情，根据实际文内容详情，根据实际文',
          status: 'error',
        },
        {
          title: '标题标题标题标题标题标题标题标题标题标题',
          description: '内容详情，根据实际文案安排内容详情，根据实际文案安排',
        },
      ],
    };
  },

代码演示

垂直步骤条-基础

<fe-steps :currentIndex="currentIndex" direction="vertical">
  <template v-for="(v, i) in steps1">
    <fe-step :key="i" :title="v.title" :description="v.description" @onChange="onChangeHandle">
    </fe-step>
  </template>
</fe-steps>

垂直步骤条-带状态

<fe-steps :currentIndex="currentIndex" direction="vertical" statusType="error">
  <template v-for="(v, i) in steps1">
    <fe-step
      :customStatus="v.customStatus"
      :key="i"
      :title="v.title"
      :description="v.description"
      @onChange="onChangeHandle"
    >
    </fe-step>
  </template>
</fe-steps>

垂直步骤条-固定高度

<fe-steps :currentIndex="currentIndex" space-size="120px" direction="vertical">
  <template v-for="(v, i) in steps1">
    <fe-step :key="i" :title="v.title" :description="v.description" @onChange="onChangeHandle">
    </fe-step>
  </template>
</fe-steps>

垂直步骤条-自定义颜色/图标

<fe-steps :currentIndex="currentIndex" direction="vertical" finish-color="#b7eb8f">
  <template>
    <fe-step title="标题" description="描述">
      <fe-icon slot="icon" name="point" color="white" />
    </fe-step>
    <fe-step title="标题" description="描述">
      <fe-icon slot="icon" name="star" color="white" />
    </fe-step>
    <fe-step title="标题" description="描述" @onChange="onChangeHandle"> </fe-step>
  </template>
</fe-steps>

横向步骤条

<fe-steps :currentIndex="currentIndex">
  <template v-for="(v, i) in steps1">
    <fe-step :key="i" :title="v.title" :description="v.description"></fe-step>
  </template>
</fe-steps>

横向步骤条-自定义标题/内容

<fe-steps :currentIndex="currentIndex">
  <fe-step>
    <div slot="title"><strong>标题</strong><em>自定义标题</em></div>
    <div slot="description">
      自定义的描述<br />
      <em>自定义的描述自定义的描述自定义的描述自定义的描述</em>
    </div>
  </fe-step>
  <fe-step>
    <div slot="title">
      自定义标题333
    </div>
    <div slot="description">
      自定义的描述自定义的描述自定义的描述自定义的描述自定义的描述
    </div>
  </fe-step>
</fe-steps>

横向步骤条-居中

<fe-steps :currentIndex="currentIndex" align-center>
  <template v-for="(v, i) in steps1">
    <fe-step :key="i" :title="v.title" :description="v.description"></fe-step>
  </template>
</fe-steps>

横向步骤条-自定义大小颜色

<fe-steps circle-size="14" finish-color="rgb(65, 184, 131)" :currentIndex="currentIndex">
  <template v-for="(v, i) in steps1">
    <fe-step :key="i" :title="v.title" :description="v.description"></fe-step>
  </template>
</fe-steps>

Props steps 整体步骤条

Props steps 整体步骤条 点击事件

Props steps.step 步骤条内的每一个步骤

Props steps.step 步骤条内的每一个步骤 Slots