有日子没弄组件库了😁，这个礼拜没啥事我给组件库增加了步骤条组件和图标组件，计划将组件库中代码升级为vue3.0+TS写法，容错率更高一些。

步骤条组件可定制话程度较高，详细参数已经在README文档中说明，先附上gitHub仓库地址吧：github.com/Mryuelaiyue…

Icon：图标

Icon采用的是symbol方式，即：svg矢量图。为了方便测试，我在iconfoot中找到了7个图标，可替换。name属性不需要前面的 .icon- **

Steps：步骤条

1 基础用法

  <steps :active="2">
        <step>步骤1</step>
        <step>步骤2</step>
        <step>步骤3</step>
        <step>步骤4</step>
  </steps>

如下图：

2 垂直方向

手机端应该垂直方向用的较多，所以增加了一个direction:vertical

  <steps :active="2" direction=“vertical”>
        <step>步骤1</step>
        <step>步骤2</step>
        <step>步骤3</step>
        <step>步骤4</step>
  </steps>

如图：

3 自定义颜色

可通过更改activeColor和inactiveColor更改激活未激活状态颜色。

  <steps :active="2" activeColor="success" inactiveColor="warning">
        <step>步骤1</step>
        <step>步骤2</step>
        <step>步骤3</step>
        <step>步骤4</step>
  </steps>

效果图：

4 自定义图标

完成、激活和未激活图标用户可自行替换。

  <steps
        :active="2"
        finishIcon="thumbs_up_line"
        activeIcon="fire_line"
        inactiveIcon="close_line"
      >
        <step>步骤1</step>
        <step>步骤2</step>
        <step>步骤3</step>
        <step>步骤4</step>
 </steps>

效果图：

5 自定义插槽

定义三种状态插槽。注意：三种状态插槽大小需一样，否则无法对齐

  <steps :active="2">
        <step>
          <div
            slot="active-icon"
            :style="{
              width: '20px',
              height: '20px',
              backgroundColor: 'var(--danger)',
            }"
          ></div>
          <div
            slot="finish-icon"
            :style="{
              width: '20px',
              height: '20px',
              backgroundColor: 'var(--success)',
            }"
          ></div>
          <div
            slot="inactive-icon"
            :style="{
              width: '20px',
              height: '20px',
              backgroundColor: 'var(--body)',
            }"
          ></div>
          步骤1
        </step>
        <step>
          <div
            slot="active-icon"
            :style="{
              width: '20px',
              height: '20px',
              backgroundColor: 'var(--danger)',
            }"
          ></div>
          <div
            slot="finish-icon"
            :style="{
              width: '20px',
              height: '20px',
              backgroundColor: 'var(--success)',
            }"
          ></div>
          <div
            slot="inactive-icon"
            :style="{
              width: '20px',
              height: '20px',
              backgroundColor: 'var(--body)',
            }"
          ></div>
          步骤2
        </step>
        <step>
          <div
            slot="active-icon"
            :style="{
              width: '20px',
              height: '20px',
              backgroundColor: 'var(--danger)',
            }"
          ></div>
          <div
            slot="finish-icon"
            :style="{
              width: '20px',
              height: '20px',
              backgroundColor: 'var(--success)',
            }"
          ></div>
          <div
            slot="inactive-icon"
            :style="{
              width: '20px',
              height: '20px',
              backgroundColor: 'var(--body)',
            }"
          ></div>
          步骤3
        </step>
        <step>
          <div
            slot="active-icon"
            :style="{
              width: '20px',
              height: '20px',
              backgroundColor: 'var(--danger)',
            }"
          ></div>
          <div
            slot="finish-icon"
            :style="{
              width: '20px',
              height: '20px',
              backgroundColor: 'var(--success)',
            }"
          ></div>
          <div
            slot="inactive-icon"
            :style="{
              width: '20px',
              height: '20px',
              backgroundColor: 'var(--body)',
            }"
          ></div>
          步骤4
        </step>
   </steps>

效果图：