DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/demo/component/step.vue

<template>
  <view>
    <l-title>基本步骤条：</l-title>
    <view class="bg-white padding">
      <l-step
        :steps="[
          { title: '步骤1', icon: 'emoji' },
          { title: '步骤2', icon: 'home' },
          { title: '步骤3', icon: 'search' },
          { title: '步骤4', icon: 'check' }
        ]"
        :step="1"
      />

      <l-step
        :steps="[
          { title: '步骤1', icon: 'emoji' },
          { title: '步骤2', icon: 'home' },
          { title: '步骤3', icon: 'search' },
          { title: '步骤4', icon: 'check' }
        ]"
        :step="2"
        activeColor="red"
        class="margin-top-sm"
        point
      />
    </view>
    <l-demo-description>
      步骤条使用 l-step 标签；绑定 steps 属性作为步骤条项的显示内容，这是一个数组；
      steps 使用以下数据： [{title:'步骤标题',icon:'步骤图标'},...] ；
      属性 step 表示当前所处步骤号；属性 activeColor 表示激活时的颜色；添加属性 point 将把未激活的步骤显示为圆点
    </l-demo-description>

    <l-title>箭头步骤条：</l-title>
    <view class="bg-white padding">
      <l-step
        :steps="[
          { title: '步骤1', icon: 'emoji' },
          { title: '步骤2', icon: 'home' },
          { title: '步骤3', icon: 'search' },
          { title: '步骤4', icon: 'check' }
        ]"
        :step="1"
        arrow
      />
    </view>
    <l-demo-description>
      给 l-step 标签添加 arrow 属性即可使用箭头步骤条
    </l-demo-description>

    <l-title>数字步骤条：</l-title>
    <view class="bg-white padding">
      <l-step
        :steps="[
          { title: '步骤1', icon: 'emoji' },
          { title: '步骤2', icon: 'home' },
          { title: '步骤3', icon: 'search' },
          { title: '步骤4', icon: 'check' }
        ]"
        :step="1"
        number
        arrow
      />
    </view>
    <l-demo-description>
      给 l-step 标签添加 number 即可使用数字编号图标
    </l-demo-description>
  </view>
</template>