From 88b440c6a6094f0654d1fbf7d23466084a448dd4 Mon Sep 17 00:00:00 2001
From: wuyangfan <1102042793@qq.com>
Date: Thu, 24 Feb 2022 16:53:12 +0800
Subject: [PATCH] feat(ui/steps): add component steps

---
 packages/varlet-vue2-ui/src/step/Step.vue     |  99 +++++++++
 .../varlet-vue2-ui/src/step/docs/zh-CN.md     |  15 ++
 packages/varlet-vue2-ui/src/step/index.ts     |  10 +
 packages/varlet-vue2-ui/src/step/props.ts     |  12 ++
 packages/varlet-vue2-ui/src/step/step.less    | 145 +++++++++++++
 packages/varlet-vue2-ui/src/steps/Steps.vue   |  27 +++
 .../__snapshots__/index.spec.js.snap          | 195 ++++++++++++++++++
 .../src/steps/__tests__/index.spec.js         |  86 ++++++++
 .../varlet-vue2-ui/src/steps/docs/en-US.md    | 142 +++++++++++++
 .../varlet-vue2-ui/src/steps/docs/zh-CN.md    | 143 +++++++++++++
 .../src/steps/example/index.vue               |  67 ++++++
 .../src/steps/example/locale/en-US.ts         |  15 ++
 .../src/steps/example/locale/index.ts         |  23 +++
 .../src/steps/example/locale/zh-CN.ts         |  15 ++
 packages/varlet-vue2-ui/src/steps/index.ts    |  10 +
 packages/varlet-vue2-ui/src/steps/props.ts    |  25 +++
 packages/varlet-vue2-ui/types/global.d.ts     |   2 +
 packages/varlet-vue2-ui/types/index.d.ts      |   2 +
 packages/varlet-vue2-ui/types/step.d.ts       |  13 ++
 packages/varlet-vue2-ui/types/steps.d.ts      |  15 ++
 20 files changed, 1061 insertions(+)
 create mode 100644 packages/varlet-vue2-ui/src/step/Step.vue
 create mode 100644 packages/varlet-vue2-ui/src/step/docs/zh-CN.md
 create mode 100644 packages/varlet-vue2-ui/src/step/index.ts
 create mode 100644 packages/varlet-vue2-ui/src/step/props.ts
 create mode 100644 packages/varlet-vue2-ui/src/step/step.less
 create mode 100644 packages/varlet-vue2-ui/src/steps/Steps.vue
 create mode 100644 packages/varlet-vue2-ui/src/steps/__tests__/__snapshots__/index.spec.js.snap
 create mode 100644 packages/varlet-vue2-ui/src/steps/__tests__/index.spec.js
 create mode 100644 packages/varlet-vue2-ui/src/steps/docs/en-US.md
 create mode 100644 packages/varlet-vue2-ui/src/steps/docs/zh-CN.md
 create mode 100644 packages/varlet-vue2-ui/src/steps/example/index.vue
 create mode 100644 packages/varlet-vue2-ui/src/steps/example/locale/en-US.ts
 create mode 100644 packages/varlet-vue2-ui/src/steps/example/locale/index.ts
 create mode 100644 packages/varlet-vue2-ui/src/steps/example/locale/zh-CN.ts
 create mode 100644 packages/varlet-vue2-ui/src/steps/index.ts
 create mode 100644 packages/varlet-vue2-ui/src/steps/props.ts
 create mode 100644 packages/varlet-vue2-ui/types/step.d.ts
 create mode 100644 packages/varlet-vue2-ui/types/steps.d.ts

diff --git a/packages/varlet-vue2-ui/src/step/Step.vue b/packages/varlet-vue2-ui/src/step/Step.vue
new file mode 100644
index 0000000..1a89916
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/step/Step.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="var-step">
+    <div :class="`var-step-${direction}`">
+      <div :class="`var-step-${direction}__main`" ref="main">
+        <div
+          :class="{
+            [`var-step-${direction}__tag`]: true,
+            [`var-step-${direction}__tag--active`]: isActive || isCurrent,
+          }"
+          :style="{ backgroundColor: isActive || isCurrent ? activeColor : inactiveColor }"
+          @click="click"
+        >
+          <var-icon class="var-step__icon" var-step-cover :name="activeIcon" v-if="isActive" />
+          <var-icon class="var-step__icon" var-step-cover :name="currentIcon" v-else-if="isCurrent && currentIcon" />
+          <var-icon class="var-step__icon" var-step-cover :name="inactiveIcon" v-else-if="inactiveIcon" />
+          <span v-else>{{ index + 1 }}</span>
+        </div>
+        <div
+          :class="{
+            [`var-step-${direction}__content`]: true,
+            [`var-step-${direction}__content--active`]: isActive || isCurrent,
+          }"
+          @click="click"
+        >
+          <slot />
+        </div>
+      </div>
+      <div :class="`var-step-${direction}__line`" v-if="!isLastChild" :style="{ margin: lineMargin }"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { props } from './props'
+import { defineComponent } from '../utils/create'
+import VarIcon from '../icon'
+import { createChildrenMixin } from '../utils/mixins/relation'
+
+export default defineComponent({
+  name: 'VarStep',
+  components: {
+    VarIcon,
+  },
+  mixins: [createChildrenMixin('steps', { childrenKey: 'step' })],
+  data: () => ({
+    lineMargin: '',
+    isLastChild: false,
+  }),
+  props,
+  computed: {
+    index() {
+      return this.steps.step.indexOf(this)
+    },
+    isCurrent({ active, index }) {
+      return active === index
+    },
+    active() {
+      return this.steps.active
+    },
+    isActive({ index, active }) {
+      return index !== -1 && active > index
+    },
+    length() {
+      return this.steps.step.length
+    },
+    activeColor() {
+      return this.steps.activeColor
+    },
+    inactiveColor() {
+      return this.steps.inactiveColor
+    },
+    direction() {
+      return this.steps.direction
+    },
+  },
+  watch: {
+    length() {
+      const { newLength, index } = this
+      this.isLastChild = newLength - 1 === index
+      const main = this.$refs.main
+      if (main) {
+        const margin = main.offsetWidth / 2 - 14
+        this.lineMargin = `0 -${margin}px`
+      }
+    },
+  },
+  methods: {
+    click() {
+      this.steps.getListeners().onClickStep?.(this.index)
+    },
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../icon/icon';
+@import './step';
+</style>
diff --git a/packages/varlet-vue2-ui/src/step/docs/zh-CN.md b/packages/varlet-vue2-ui/src/step/docs/zh-CN.md
new file mode 100644
index 0000000..de98bb9
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/step/docs/zh-CN.md
@@ -0,0 +1,15 @@
+## API
+
+### 属性
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ----- | -------------- | -------- | ---------- |
+| `active-icon` | 激活状态图标  | _string_ | `check` |
+| `current-icon` | 当前步骤时的图标 | _string_ | - |
+| `inactive-icon` | 未激活状态图标 | _string_ | - |
+
+### 插槽
+
+| 名称 | 说明 | 参数 |
+| ----- | -------------- | -------- |
+| `default` | step 的内容 | - |
diff --git a/packages/varlet-vue2-ui/src/step/index.ts b/packages/varlet-vue2-ui/src/step/index.ts
new file mode 100644
index 0000000..e785484
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/step/index.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import Step from './Step.vue'
+
+Step.install = function (app: App) {
+  app.component(Step.name, Step)
+}
+
+export const _StepComponent = Step
+
+export default Step
diff --git a/packages/varlet-vue2-ui/src/step/props.ts b/packages/varlet-vue2-ui/src/step/props.ts
new file mode 100644
index 0000000..7470302
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/step/props.ts
@@ -0,0 +1,12 @@
+export const props = {
+  activeIcon: {
+    type: String,
+    default: 'check',
+  },
+  currentIcon: {
+    type: String,
+  },
+  inactiveIcon: {
+    type: String,
+  },
+}
diff --git a/packages/varlet-vue2-ui/src/step/step.less b/packages/varlet-vue2-ui/src/step/step.less
new file mode 100644
index 0000000..2e8b5ea
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/step/step.less
@@ -0,0 +1,145 @@
+@step-tag-size: 20px;
+@step-tag-background: #9e9e9e;
+@step-tag-font-size: var(--font-size-md);
+@step-tag-color: #fff;
+@step-tag-active-color: var(--color-primary);
+@step-tag-margin: 4px 0;
+@step-tag-icon-size: var(--font-size-lg);
+@step-content-font-size: var(--font-size-md);
+@step-content-color: rgba(0, 0, 0, 0.38);
+@step-content-active-color: #000;
+@step-line-background: #000;
+@step-vertical-min-height: 30px;
+@step-vertical-tag-margin: 0 4px;
+@step-vertical-line-height: calc(100% - 30px);
+@step-vertical-line-min-height: 20px;
+
+:root {
+  --step-tag-size: @step-tag-size;
+  --step-tag-background: @step-tag-background;
+  --step-tag-font-size: @step-tag-font-size;
+  --step-tag-color: @step-tag-color;
+  --step-tag-active-color: @step-tag-active-color;
+  --step-tag-margin: @step-tag-margin;
+  --step-tag-icon-size: @step-tag-icon-size;
+  --step-content-font-size: @step-content-font-size;
+  --step-content-color: @step-content-color;
+  --step-content-active-color: @step-content-active-color;
+  --step-line-background: @step-line-background;
+  --step-vertical-min-height: @step-vertical-min-height;
+  --step-vertical-tag-margin: @step-vertical-tag-margin;
+  --step-vertical-line-height: @step-vertical-line-height;
+  --step-vertical-line-min-height: @step-vertical-line-min-height;
+}
+
+// Mixins
+.tag {
+  width: var(--step-tag-size);
+  height: var(--step-tag-size);
+  background: var(--step-tag-background);
+  display: flex;
+  font-size: var(--step-tag-font-size);
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: var(--step-tag-color);
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition: 0.3s var(--cubic-bezier);
+}
+
+// Mixins
+.content {
+  font-size: var(--step-content-font-size);
+  color: var(--step-content-color);
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition: 0.3s var(--cubic-bezier);
+}
+
+.var-step {
+  display: flex;
+  position: relative;
+  flex: 1;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &-horizontal {
+    display: flex;
+    width: 100%;
+
+    &__main {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex-basis: 100%;
+    }
+
+    &__tag {
+      margin: var(--step-tag-margin);
+      .tag();
+
+      &--active {
+        background: var(--step-tag-active-color);
+      }
+    }
+
+    &__content {
+      .content();
+
+      &--active {
+        color: var(--step-content-active-color);
+      }
+    }
+
+    &__line {
+      position: relative;
+      top: 14px;
+      flex: 1;
+      height: 1px;
+      transform: scaleY(0.5);
+      background: var(--step-line-background);
+    }
+  }
+
+  &-vertical {
+    width: 100%;
+
+    &__main {
+      display: flex;
+      align-items: flex-start;
+      min-height: var(--step-vertical-min-height);
+    }
+
+    &__tag {
+      margin: var(--step-vertical-tag-margin);
+      .tag();
+
+      &--active {
+        background: var(--step-tag-active-color);
+      }
+    }
+
+    &__content {
+      .content();
+
+      &--active {
+        color: var(--step-content-active-color);
+      }
+    }
+
+    &__line {
+      position: relative;
+      height: var(--step-vertical-line-height);
+      left: 14px;
+      top: calc(-100% + 45px);
+      min-height: var(--step-vertical-line-min-height);
+      width: 1px;
+      transform: scaleX(0.5);
+      background: var(--step-line-background);
+    }
+  }
+
+  &__icon[var-step-cover] {
+    font-size: var(--step-tag-icon-size);
+  }
+}
diff --git a/packages/varlet-vue2-ui/src/steps/Steps.vue b/packages/varlet-vue2-ui/src/steps/Steps.vue
new file mode 100644
index 0000000..b3900a8
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/steps/Steps.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="var-steps" :style="{ flexDirection: direction === 'horizontal' ? 'row' : 'column' }">
+    <slot />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '../utils/create'
+import { props } from './props'
+import { createParentMixin } from '../utils/mixins/relation'
+
+export default defineComponent({
+  name: 'VarSteps',
+  props,
+  mixins: [createParentMixin('steps', { childrenKey: 'step' })],
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+
+.var-steps {
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+</style>
diff --git a/packages/varlet-vue2-ui/src/steps/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/steps/__tests__/__snapshots__/index.spec.js.snap
new file mode 100644
index 0000000..18732d8
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/steps/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test step direction prop 1`] = `
+"<div class=\\"var-steps\\" style=\\"flex-direction: row;\\">
+  <div class=\\"var-step\\">
+    <div class=\\"var-step-horizontal\\">
+      <div class=\\"var-step-horizontal__main\\">
+        <div class=\\"var-step-horizontal__tag\\"><span>0</span></div>
+        <div class=\\"var-step-horizontal__content\\">步骤1</div>
+      </div>
+      <div class=\\"var-step-horizontal__line\\"></div>
+    </div>
+  </div>
+  <div class=\\"var-step\\">
+    <div class=\\"var-step-horizontal\\">
+      <div class=\\"var-step-horizontal__main\\">
+        <div class=\\"var-step-horizontal__tag\\"><span>0</span></div>
+        <div class=\\"var-step-horizontal__content\\">步骤2</div>
+      </div>
+      <div class=\\"var-step-horizontal__line\\"></div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`test step direction prop 2`] = `
+"<div class=\\"var-steps\\" style=\\"flex-direction: column;\\">
+  <div class=\\"var-step\\">
+    <div class=\\"var-step-vertical\\">
+      <div class=\\"var-step-vertical__main\\">
+        <div class=\\"var-step-vertical__tag var-step-vertical__tag--active\\"><span>1</span></div>
+        <div class=\\"var-step-vertical__content var-step-vertical__content--active\\">步骤1</div>
+      </div>
+      <div class=\\"var-step-vertical__line\\"></div>
+    </div>
+  </div>
+  <div class=\\"var-step\\">
+    <div class=\\"var-step-vertical\\">
+      <div class=\\"var-step-vertical__main\\">
+        <div class=\\"var-step-vertical__tag\\"><span>2</span></div>
+        <div class=\\"var-step-vertical__content\\">步骤2</div>
+      </div>
+      <div class=\\"var-step-vertical__line\\"></div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`test step event 1`] = `
+"<div class=\\"var-steps\\" style=\\"flex-direction: row;\\">
+  <div class=\\"var-step\\">
+    <div class=\\"var-step-horizontal\\">
+      <div class=\\"var-step-horizontal__main\\">
+        <div class=\\"var-step-horizontal__tag\\" style=\\"background-color: rgb(233, 158, 180);\\"><i class=\\"var-icon var-step__icon var-icon--set var-icon-heart-half-full\\" style=\\"transition: transform 0ms;\\" var-step-cover=\\"\\"></i></div>
+        <div class=\\"var-step-horizontal__content\\">步骤1</div>
+      </div>
+      <div class=\\"var-step-horizontal__line\\"></div>
+    </div>
+  </div>
+  <div class=\\"var-step\\">
+    <div class=\\"var-step-horizontal\\">
+      <div class=\\"var-step-horizontal__main\\">
+        <div class=\\"var-step-horizontal__tag\\" style=\\"background-color: rgb(233, 158, 180);\\"><i class=\\"var-icon var-step__icon var-icon--set var-icon-heart-half-full\\" style=\\"transition: transform 0ms;\\" var-step-cover=\\"\\"></i></div>
+        <div class=\\"var-step-horizontal__content\\">步骤2</div>
+      </div>
+      <div class=\\"var-step-horizontal__line\\"></div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`test steps example 1`] = `
+"<div class=\\"var-step2-example\\">
+  <div class=\\"app-type\\">基本使用</div>
+  <div class=\\"var-steps\\" style=\\"flex-direction: row;\\">
+    <div class=\\"var-step\\">
+      <div class=\\"var-step-horizontal\\">
+        <div class=\\"var-step-horizontal__main\\">
+          <div class=\\"var-step-horizontal__tag\\"><span>0</span></div>
+          <div class=\\"var-step-horizontal__content\\">步骤1</div>
+        </div>
+        <div class=\\"var-step-horizontal__line\\"></div>
+      </div>
+    </div>
+    <div class=\\"var-step\\">
+      <div class=\\"var-step-horizontal\\">
+        <div class=\\"var-step-horizontal__main\\">
+          <div class=\\"var-step-horizontal__tag\\"><span>0</span></div>
+          <div class=\\"var-step-horizontal__content\\">步骤2</div>
+        </div>
+        <div class=\\"var-step-horizontal__line\\"></div>
+      </div>
+    </div>
+    <div class=\\"var-step\\">
+      <div class=\\"var-step-horizontal\\">
+        <div class=\\"var-step-horizontal__main\\">
+          <div class=\\"var-step-horizontal__tag\\"><span>0</span></div>
+          <div class=\\"var-step-horizontal__content\\">步骤3</div>
+        </div>
+        <div class=\\"var-step-horizontal__line\\"></div>
+      </div>
+    </div>
+    <div class=\\"var-step\\">
+      <div class=\\"var-step-horizontal\\">
+        <div class=\\"var-step-horizontal__main\\">
+          <div class=\\"var-step-horizontal__tag\\"><span>0</span></div>
+          <div class=\\"var-step-horizontal__content\\">步骤4</div>
+        </div>
+        <div class=\\"var-step-horizontal__line\\"></div>
+      </div>
+    </div>
+  </div>
+  <div class=\\"app-type\\">自定义样式</div>
+  <div class=\\"var-steps\\" style=\\"flex-direction: row;\\">
+    <div class=\\"var-step\\">
+      <div class=\\"var-step-horizontal\\">
+        <div class=\\"var-step-horizontal__main\\">
+          <div class=\\"var-step-horizontal__tag\\" style=\\"background-color: rgb(233, 158, 180);\\"><i class=\\"var-icon var-step__icon var-icon--set var-icon-heart-half-full\\" style=\\"transition: transform 0ms;\\" var-step-cover=\\"\\"></i></div>
+          <div class=\\"var-step-horizontal__content\\">步骤1</div>
+        </div>
+        <div class=\\"var-step-horizontal__line\\"></div>
+      </div>
+    </div>
+    <div class=\\"var-step\\">
+      <div class=\\"var-step-horizontal\\">
+        <div class=\\"var-step-horizontal__main\\">
+          <div class=\\"var-step-horizontal__tag\\" style=\\"background-color: rgb(233, 158, 180);\\"><i class=\\"var-icon var-step__icon var-icon--set var-icon-heart-half-full\\" style=\\"transition: transform 0ms;\\" var-step-cover=\\"\\"></i></div>
+          <div class=\\"var-step-horizontal__content\\">步骤2</div>
+        </div>
+        <div class=\\"var-step-horizontal__line\\"></div>
+      </div>
+    </div>
+    <div class=\\"var-step\\">
+      <div class=\\"var-step-horizontal\\">
+        <div class=\\"var-step-horizontal__main\\">
+          <div class=\\"var-step-horizontal__tag\\" style=\\"background-color: rgb(233, 158, 180);\\"><i class=\\"var-icon var-step__icon var-icon--set var-icon-heart-half-full\\" style=\\"transition: transform 0ms;\\" var-step-cover=\\"\\"></i></div>
+          <div class=\\"var-step-horizontal__content\\">步骤3</div>
+        </div>
+        <div class=\\"var-step-horizontal__line\\"></div>
+      </div>
+    </div>
+    <div class=\\"var-step\\">
+      <div class=\\"var-step-horizontal\\">
+        <div class=\\"var-step-horizontal__main\\">
+          <div class=\\"var-step-horizontal__tag\\" style=\\"background-color: rgb(233, 158, 180);\\"><i class=\\"var-icon var-step__icon var-icon--set var-icon-heart-half-full\\" style=\\"transition: transform 0ms;\\" var-step-cover=\\"\\"></i></div>
+          <div class=\\"var-step-horizontal__content\\">步骤4</div>
+        </div>
+        <div class=\\"var-step-horizontal__line\\"></div>
+      </div>
+    </div>
+  </div>
+  <div class=\\"app-type\\">垂直模式</div>
+  <div class=\\"var-steps\\" style=\\"flex-direction: column;\\">
+    <div class=\\"var-step\\">
+      <div class=\\"var-step-vertical\\">
+        <div class=\\"var-step-vertical__main\\">
+          <div class=\\"var-step-vertical__tag\\"><span>0</span></div>
+          <div class=\\"var-step-vertical__content\\">步骤1</div>
+        </div>
+        <div class=\\"var-step-vertical__line\\"></div>
+      </div>
+    </div>
+    <div class=\\"var-step\\">
+      <div class=\\"var-step-vertical\\">
+        <div class=\\"var-step-vertical__main\\">
+          <div class=\\"var-step-vertical__tag\\"><span>0</span></div>
+          <div class=\\"var-step-vertical__content\\">步骤2</div>
+        </div>
+        <div class=\\"var-step-vertical__line\\"></div>
+      </div>
+    </div>
+    <div class=\\"var-step\\">
+      <div class=\\"var-step-vertical\\">
+        <div class=\\"var-step-vertical__main\\">
+          <div class=\\"var-step-vertical__tag\\"><span>0</span></div>
+          <div class=\\"var-step-vertical__content\\">步骤3</div>
+        </div>
+        <div class=\\"var-step-vertical__line\\"></div>
+      </div>
+    </div>
+    <div class=\\"var-step\\">
+      <div class=\\"var-step-vertical\\">
+        <div class=\\"var-step-vertical__main\\">
+          <div class=\\"var-step-vertical__tag\\"><span>0</span></div>
+          <div class=\\"var-step-vertical__content\\">步骤4</div>
+        </div>
+        <div class=\\"var-step-vertical__line\\"></div>
+      </div>
+    </div>
+  </div> <button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--2\\" style=\\"margin-top: 20px;\\">
+    <!---->
+    <div class=\\"var-button__content\\">下一步</div>
+  </button>
+</div>"
+`;
diff --git a/packages/varlet-vue2-ui/src/steps/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/steps/__tests__/index.spec.js
new file mode 100644
index 0000000..a4313ea
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/steps/__tests__/index.spec.js
@@ -0,0 +1,86 @@
+import example from '../example'
+import Steps from '..'
+import Step from '../../step'
+import VarSteps from '../Steps'
+import VarStep from '../../step/Step'
+import { mount } from '@vue/test-utils'
+import Vue from 'vue'
+
+test('test steps example', () => {
+  const wrapper = mount(example)
+
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
+test('test steps and step plugin', () => {
+  Vue.use(Steps)
+  Vue.use(Step)
+
+  expect(Vue.component(Steps.name)).toBeTruthy()
+  expect(Vue.component(Step.name)).toBeTruthy()
+})
+
+test('test step direction prop', async () => {
+  const template = `
+    <var-steps :direction="direction">
+      <var-step>步骤1</var-step>
+      <var-step>步骤2</var-step>
+    </var-steps>
+  `
+  const wrapper = mount(
+    {
+      template,
+      components: {
+        [VarSteps.name]: VarSteps,
+        [VarStep.name]: VarStep,
+      },
+      data() {
+        return {
+          direction: 'horizontal',
+        }
+      },
+    },
+    { attachTo: document.body }
+  )
+
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setData({ direction: 'vertical' })
+
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
+test('test step event', async () => {
+  const clickStep = jest.fn()
+
+  const template = `
+     <var-steps :active="active" active-color="#f44336" inactive-color="#e99eb4" @clickStep="clickStep">
+      <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">步骤1</var-step>
+      <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">步骤2</var-step>
+    </var-steps>
+  `
+  const wrapper = mount(
+    {
+      template,
+      components: {
+        [VarSteps.name]: VarSteps,
+        [VarStep.name]: VarStep,
+      },
+      data() {
+        return {
+          active: '1',
+        }
+      },
+      methods: {
+        clickStep,
+      },
+    },
+    { attachTo: document.body }
+  )
+
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.find('.var-step-horizontal__tag').trigger('click')
+
+  expect(clickStep).toHaveBeenCalledTimes(1)
+})
diff --git a/packages/varlet-vue2-ui/src/steps/docs/en-US.md b/packages/varlet-vue2-ui/src/steps/docs/en-US.md
new file mode 100644
index 0000000..da8217e
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/steps/docs/en-US.md
@@ -0,0 +1,142 @@
+# Steps
+
+### Intro
+
+Steps is a navigation bar that guides users through the steps of a task.
+
+### Install
+
+```js
+import { createApp } from 'vue'
+import { Steps, Step } from '@varlet/ui'
+
+createApp().use(Steps).use(Step)
+```
+
+### Basic Usage
+
+Use `active` prop to control the progress of step, value is index of step and is counted from `0`.
+
+```html
+<var-steps :active="active">
+  <var-step>Step1</var-step>
+  <var-step>Step2</var-step>
+  <var-step>Step3</var-step>
+  <var-step>Step4</var-step>
+</var-steps>
+<var-button type="primary" block @click="next">next</var-button>
+```
+
+```javascript
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const active = ref(0)
+
+    const next = () => {
+      active.value = (active.value + 1) % 4
+    }
+    
+    return {
+      active,
+      next
+    }
+  }
+}
+```
+
+### Custom Style
+
+```html
+<var-steps 
+  :active="active"
+  active-color="#f44336"
+  inactive-color="#e99eb4"
+>
+  <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">
+    Step1
+  </var-step>
+  <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">
+    Step2
+  </var-step>
+  <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">
+    Step3
+  </var-step>
+  <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">
+    Step4
+  </var-step>
+</var-steps>
+```
+
+### Vertical Mode
+
+Change the display direction of the step bar through the `direction` attribute.
+
+```html
+<var-steps direction="vertical" :active="active">
+  <var-step>Step1</var-step>
+  <var-step>Step2</var-step>
+  <var-step>Step3</var-step>
+  <var-step>Step4</var-step>
+</var-steps>
+```
+
+## API
+
+### Props
+
+#### Steps Props
+
+| Prop | Description | Type | Default |
+| ----- | -------------- | -------- | ---------- |
+| `active` | Active step | _string \| number_ | `0` |
+| `direction` | Mode of steps, Can be set to `vertical` | _string_ | `horizontal` |
+| `active-color` | Active step color | _string_ | `#2979ff` |
+| `inactive-color` | Inactive step color | _string_ | `#9e9e9e` |
+
+#### Step Props
+
+| Prop | Description | Type | Default |
+| ----- | -------------- | -------- | ---------- |
+| `active-icon` | Active icon name  | _string_ | `check` |
+| `current-icon` | Icon name of current ste	 | _string_ | `-`|
+| `inactive-icon` | Inactive icon name	 | _string_ | `-`|
+
+### Events
+
+#### Steps Events
+
+| Event | Description | arguments |
+| ----- | -------------- | -------- |
+| `click-step` | Emitted after click step | `index: number` |
+
+### Slots
+
+#### Step Slots
+
+| Name | Description | SlotProps |
+| ----- | -------------- | -------- |
+| `default` | Content of step | `-`|
+
+### Style Variables
+
+Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider)
+
+| Variable | Default |
+| --- | --- |
+| `--step-tag-size` | `20px` |
+| `--step-tag-background` | `#9e9e9e` |
+| `--step-tag-font-size` | `var(--font-size-md)` |
+| `--step-tag-color` | `#fff` |
+| `--step-tag-active-color` | `var(--color-primary)` |
+| `--step-tag-margin` | `4px 0` |
+| `--step-tag-icon-size` | `var(--font-size-lg)` |
+| `--step-content-font-size` | `var(--font-size-md)` |
+| `--step-content-color` | `rgba(0, 0, 0, 0.38)` |
+| `--step-content-active-color` | `#000` |
+| `--step-line-background` | `#000` |
+| `--step-vertical-min-height` | `30px` |
+| `--step-vertical-tag-margin` | `0 4px` |
+| `--step-vertical-line-height` | `calc(100% - 30px)` |
+| `--step-vertical-line-min-height` | `20px` |
diff --git a/packages/varlet-vue2-ui/src/steps/docs/zh-CN.md b/packages/varlet-vue2-ui/src/steps/docs/zh-CN.md
new file mode 100644
index 0000000..ca053c7
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/steps/docs/zh-CN.md
@@ -0,0 +1,143 @@
+# 步骤条
+
+### 介绍
+
+引导用户按照流程完成任务的导航条。
+
+### 引入
+
+```js
+import Vue from 'vue'
+import { Steps, Step } from '@varlet-vue2/ui'
+
+Vue.use(Steps)
+Vue.use(Step)
+```
+
+### 基本使用
+
+通过 `active` 属性控制当前步骤条的进度，值为当前 `step` 的索引，从 `0` 起计。
+
+```html
+<var-steps :active="active">
+  <var-step>步骤1</var-step>
+  <var-step>步骤2</var-step>
+  <var-step>步骤3</var-step>
+  <var-step>步骤4</var-step>
+</var-steps>
+<var-button type="primary" block @click="next">下一步</var-button>
+```
+
+```javascript
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const active = ref(0)
+
+    const next = () => {
+      active.value = (active.value + 1) % 4
+    }
+
+    return {
+      active,
+      next
+    }
+  }
+}
+```
+
+### 自定义样式
+
+```html
+<var-steps
+  :active="active"
+  active-color="#f44336"
+  inactive-color="#e99eb4"
+>
+  <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">
+    步骤1
+  </var-step>
+  <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">
+    步骤2
+  </var-step>
+  <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">
+    步骤3
+  </var-step>
+  <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">
+    步骤4
+  </var-step>
+</var-steps>
+```
+
+### 垂直模式
+
+通过 `direction` 属性改变步骤条的显示方向。
+
+```html
+<var-steps direction="vertical" :active="active">
+  <var-step>步骤1</var-step>
+  <var-step>步骤2</var-step>
+  <var-step>步骤3</var-step>
+  <var-step>步骤4</var-step>
+</var-steps>
+```
+
+## API
+
+### 属性
+
+#### Steps Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ----- | -------------- | -------- | ---------- |
+| `active` | 当前步骤 | _string \| number_ | `0` |
+| `direction` | 显示方向，可选值为 `vertical` | _string_ | `horizontal` |
+| `active-color` | 激活状态颜色 | _string_ | `#2979ff` |
+| `inactive-color` | 未激活状态颜色 | _string_ | `#9e9e9e` |
+
+#### Step Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ----- | -------------- | -------- | ---------- |
+| `active-icon` | 激活状态图标  | _string_ | `check` |
+| `current-icon` | 当前步骤时的图标 | _string_ | `-` |
+| `inactive-icon` | 未激活状态图标 | _string_ | `-` |
+
+### 事件
+
+#### Steps Events
+
+| 事件名 | 说明 | 回调参数 |
+| ----- | -------------- | -------- |
+| `click-step` | 点击步骤的标题或图标时触发| `index: number` |
+
+### 插槽
+
+#### Step Slots
+
+| 名称 | 说明 | 参数 |
+| ----- | -------------- | -------- |
+| `default` | step 的内容 | `-` |
+
+### 样式变量
+
+以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider)进行样式定制
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `--step-tag-size` | `20px` |
+| `--step-tag-background` | `#9e9e9e` |
+| `--step-tag-font-size` | `var(--font-size-md)` |
+| `--step-tag-color` | `#fff` |
+| `--step-tag-active-color` | `var(--color-primary)` |
+| `--step-tag-margin` | `4px 0` |
+| `--step-tag-icon-size` | `var(--font-size-lg)` |
+| `--step-content-font-size` | `var(--font-size-md)` |
+| `--step-content-color` | `rgba(0, 0, 0, 0.38)` |
+| `--step-content-active-color` | `#000` |
+| `--step-line-background` | `#000` |
+| `--step-vertical-min-height` | `30px` |
+| `--step-vertical-tag-margin` | `0 4px` |
+| `--step-vertical-line-height` | `calc(100% - 30px)` |
+| `--step-vertical-line-min-height` | `20px` |
diff --git a/packages/varlet-vue2-ui/src/steps/example/index.vue b/packages/varlet-vue2-ui/src/steps/example/index.vue
new file mode 100644
index 0000000..858a55c
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/steps/example/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="var-step2-example">
+    <app-type>{{ pack.basicUsage }}</app-type>
+    <var-steps :active="active" @clickStep="click">
+      <var-step>{{ pack.first }}</var-step>
+      <var-step>{{ pack.second }}</var-step>
+      <var-step>{{ pack.third }}</var-step>
+      <var-step>{{ pack.fourth }}</var-step>
+    </var-steps>
+    <app-type>{{ pack.customStyle }}</app-type>
+    <var-steps :active="active" active-color="#f44336" inactive-color="#e99eb4">
+      <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">{{ pack.first }}</var-step>
+      <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">{{ pack.second }}</var-step>
+      <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">{{ pack.third }}</var-step>
+      <var-step active-icon="heart" current-icon="fire" inactive-icon="heart-half-full">{{ pack.fourth }}</var-step>
+    </var-steps>
+    <app-type>{{ pack.vertical }}</app-type>
+    <var-steps direction="vertical" :active="active">
+      <var-step>{{ pack.first }}</var-step>
+      <var-step>{{ pack.second }}</var-step>
+      <var-step>{{ pack.third }}</var-step>
+      <var-step>{{ pack.fourth }}</var-step>
+    </var-steps>
+    <var-button type="primary" block @click="next" style="margin-top: 20px">{{ pack.next }}</var-button>
+  </div>
+</template>
+
+<script>
+import VarSteps from '..'
+import VarStep from '../../step'
+import VarButton from '../../button'
+import AppType from '@varlet-vue2/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
+import { use, pack } from './locale'
+import { watchLang, watchDarkMode } from '@varlet-vue2/cli/site/utils'
+
+export default {
+  name: 'StepsExample',
+  components: {
+    VarSteps,
+    VarStep,
+    VarButton,
+    AppType,
+  },
+  data: () => ({
+    active: 0,
+  }),
+  computed: {
+    pack() {
+      return pack.value
+    },
+  },
+  created() {
+    watchLang(this, use)
+
+    watchDarkMode(this, dark)
+  },
+  methods: {
+    next() {
+      this.active = (this.active + 1) % 4
+    },
+    click(index) {
+      console.log(index)
+    },
+  },
+}
+</script>
diff --git a/packages/varlet-vue2-ui/src/steps/example/locale/en-US.ts b/packages/varlet-vue2-ui/src/steps/example/locale/en-US.ts
new file mode 100644
index 0000000..3df6d4c
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/steps/example/locale/en-US.ts
@@ -0,0 +1,15 @@
+export default {
+  basicUsage: 'Basic Usage',
+  customStyle: 'Custom Style',
+  dynamicSteps: 'Dynamic Steps',
+  vertical: 'Vertical Mode',
+  next: 'next',
+  first: 'Step1',
+  second: 'Step2',
+  third: 'Step3',
+  fourth: 'Step4',
+  fifth: 'Step5',
+  placeholder: 'Change the number of steps',
+  step: 'Step',
+  text: 'do something...',
+}
diff --git a/packages/varlet-vue2-ui/src/steps/example/locale/index.ts b/packages/varlet-vue2-ui/src/steps/example/locale/index.ts
new file mode 100644
index 0000000..d2e375e
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/steps/example/locale/index.ts
@@ -0,0 +1,23 @@
+// lib
+import _zhCN from '../../../locale/zh-CN'
+import _enCN from '../../../locale/en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+import enUS from './en-US'
+import { useLocale, add as _add, use as _use } from '../../../locale'
+
+const { add, use: exampleUse, pack, packs, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, pack, packs, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN as any)
+add('en-US', enUS as any)
diff --git a/packages/varlet-vue2-ui/src/steps/example/locale/zh-CN.ts b/packages/varlet-vue2-ui/src/steps/example/locale/zh-CN.ts
new file mode 100644
index 0000000..df9faf6
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/steps/example/locale/zh-CN.ts
@@ -0,0 +1,15 @@
+export default {
+  basicUsage: '基本使用',
+  customStyle: '自定义样式',
+  dynamicSteps: '动态步骤',
+  vertical: '垂直模式',
+  next: '下一步',
+  first: '步骤1',
+  second: '步骤2',
+  third: '步骤3',
+  fourth: '步骤4',
+  fifth: '步骤5',
+  placeholder: '改变step的数量',
+  step: '步骤',
+  text: '接下来...',
+}
diff --git a/packages/varlet-vue2-ui/src/steps/index.ts b/packages/varlet-vue2-ui/src/steps/index.ts
new file mode 100644
index 0000000..34202ff
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/steps/index.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import Steps from './Steps.vue'
+
+Steps.install = function (app: App) {
+  app.component(Steps.name, Steps)
+}
+
+export const _StepsComponent = Steps
+
+export default Steps
diff --git a/packages/varlet-vue2-ui/src/steps/props.ts b/packages/varlet-vue2-ui/src/steps/props.ts
new file mode 100644
index 0000000..4763d69
--- /dev/null
+++ b/packages/varlet-vue2-ui/src/steps/props.ts
@@ -0,0 +1,25 @@
+import type { PropType } from 'vue'
+
+type Direction = 'horizontal' | 'vertical'
+
+function directionValidator(direction: string): boolean {
+  return ['horizontal', 'vertical'].includes(direction)
+}
+
+export const props = {
+  active: {
+    type: [String, Number],
+    default: 0,
+  },
+  direction: {
+    type: String as PropType<Direction>,
+    default: 'horizontal',
+    validator: directionValidator,
+  },
+  activeColor: {
+    type: String,
+  },
+  inactiveColor: {
+    type: String,
+  },
+}
diff --git a/packages/varlet-vue2-ui/types/global.d.ts b/packages/varlet-vue2-ui/types/global.d.ts
index 722ba1e..347522e 100644
--- a/packages/varlet-vue2-ui/types/global.d.ts
+++ b/packages/varlet-vue2-ui/types/global.d.ts
@@ -30,6 +30,8 @@ declare module 'vue' {
     VarSticky: typeof import('@varlet-vue2/ui')['_StickyComponent']
     VarSwitch: typeof import('@varlet-vue2/ui')['_SwitchComponent']
     VarTable: typeof import('@varlet-vue2/ui')['_TableComponent']
+    VarSteps: typeof import('@varlet-vue2/ui')['_StepsComponent']
+    VarStep: typeof import('@varlet-vue2/ui')['_StepComponent']
     VarTimePicker: typeof import('@varlet-vue2/ui')['_TimePickerComponent']
   }
 }
diff --git a/packages/varlet-vue2-ui/types/index.d.ts b/packages/varlet-vue2-ui/types/index.d.ts
index 847a03e..d68f97e 100644
--- a/packages/varlet-vue2-ui/types/index.d.ts
+++ b/packages/varlet-vue2-ui/types/index.d.ts
@@ -32,6 +32,8 @@ export * from './space'
 export * from './sticky'
 export * from './switch'
 export * from './table'
+export * from './steps'
+export * from './step'
 export * from './timePicker'
 export * from './varComponent'
 export * from './varDirective'
diff --git a/packages/varlet-vue2-ui/types/step.d.ts b/packages/varlet-vue2-ui/types/step.d.ts
new file mode 100644
index 0000000..8d6c3b3
--- /dev/null
+++ b/packages/varlet-vue2-ui/types/step.d.ts
@@ -0,0 +1,13 @@
+import { VarComponent } from './varComponent'
+
+export interface StepProps {
+  activeIcon?: string
+  currentIcon?: string
+  inactiveIcon?: string
+}
+
+export class Step extends VarComponent {
+  $props: StepProps
+}
+
+export class _StepComponent extends Step {}
diff --git a/packages/varlet-vue2-ui/types/steps.d.ts b/packages/varlet-vue2-ui/types/steps.d.ts
new file mode 100644
index 0000000..848af6d
--- /dev/null
+++ b/packages/varlet-vue2-ui/types/steps.d.ts
@@ -0,0 +1,15 @@
+import { VarComponent } from './varComponent'
+
+export interface StepsProps {
+  active?: string | number
+  direction?: 'horizontal' | 'vertical'
+  activeColor?: string
+  inactiveColor?: string
+  onClickStep?: (index: number) => void
+}
+
+export class Steps extends VarComponent {
+  $props: StepsProps
+}
+
+export class _StepsComponent extends Steps {}