add vc-steps

7 years ago · bdfaf20927
16 changed files with 926 additions and 4 deletions
--- a/components/vc-steps/Step.vue
+++ b/components/vc-steps/Step.vue
@ -0,0 +1,111 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import { getOptionProps } from '../_util/props-util'
+
+function isString (str) {
+  return typeof str === 'string'
+}
+
+export default {
+  name: 'Step',
+  props: {
+    prefixCls: PropTypes.string,
+    wrapperStyle: PropTypes.object,
+    // itemWidth: PropTypes.oneOfType([
+    //   PropTypes.number,
+    //   PropTypes.string,
+    // ]),
+    status: PropTypes.string,
+    iconPrefix: PropTypes.string,
+    icon: PropTypes.node,
+    // adjustMarginRight: PropTypes.oneOfType([
+    //   PropTypes.number,
+    //   PropTypes.string,
+    // ]),
+    stepNumber: PropTypes.string,
+    description: PropTypes.any,
+    title: PropTypes.any,
+    progressDot: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.func,
+    ]),
+    tailContent: PropTypes.any,
+  },
+  methods: {
+    renderIconNode () {
+      const {
+        prefixCls, progressDot, stepNumber, status, title, description, icon,
+        iconPrefix,
+      } = getOptionProps(this)
+      let iconNode
+      const iconClassName = {
+        [`${prefixCls}-icon`]: true,
+        [`${iconPrefix}icon`]: true,
+        [`${iconPrefix}icon-${icon}`]: icon && isString(icon),
+        [`${iconPrefix}icon-check`]: !icon && status === 'finish',
+        [`${iconPrefix}icon-cross`]: !icon && status === 'error',
+      }
+      const iconDot = <span class={`${prefixCls}-icon-dot`}></span>
+      // `progressDot` enjoy the highest priority
+      if (progressDot) {
+        if (typeof progressDot === 'function') {
+          iconNode = (
+            <span class={`${prefixCls}-icon`}>
+              {progressDot(iconDot, { index: stepNumber - 1, status, title, description })}
+            </span>
+          )
+        } else {
+          iconNode = <span class={`${prefixCls}-icon`}>{iconDot}</span>
+        }
+      } else if (icon && !isString(icon)) {
+        iconNode = <span class={`${prefixCls}-icon`}>{icon}</span>
+      } else if (icon || status === 'finish' || status === 'error') {
+        iconNode = <span class={iconClassName} />
+      } else {
+        iconNode = <span class={`${prefixCls}-icon`}>{stepNumber}</span>
+      }
+      return iconNode
+    },
+  },
+  render () {
+    const {
+      prefixCls,
+      status = 'wait', icon,
+      description, title, tailContent,
+      ...restProps
+    } = getOptionProps(this)
+
+    const classString = {
+      [`${prefixCls}-item`]: true,
+      [`${prefixCls}-item-${status}`]: true,
+      [`${prefixCls}-item-custom`]: icon,
+    }
+    const stepProps = {
+      props: {
+        ...restProps,
+      },
+      class: classString,
+      on: this.$listeners,
+    }
+
+    return (
+      <div
+        {...stepProps}
+      >
+        <div class={`${prefixCls}-item-tail`}>
+          {tailContent}
+        </div>
+        <div class={`${prefixCls}-item-icon`}>
+          {this.renderIconNode()}
+        </div>
+        <div class={`${prefixCls}-item-content`}>
+          <div class={`${prefixCls}-item-title`}>
+            {title}
+          </div>
+          {description && <div class={`${prefixCls}-item-description`}>{description}</div>}
+        </div>
+      </div>
+    )
+  },
+}
+</script>
--- a/components/vc-steps/Steps.vue
+++ b/components/vc-steps/Steps.vue
@ -0,0 +1,144 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import BaseMixin from '../_util/BaseMixin'
+import debounce from 'lodash/debounce'
+import isFlexSupported from '../_util/isFlexSupported'
+import { getOptionProps, filterEmpty, getEvents, getClass, getStyle, getValueByProp } from '../_util/props-util'
+import { cloneElement } from '../_util/vnode'
+
+export default {
+  name: 'Steps',
+  mixins: [BaseMixin],
+  props: {
+    prefixCls: PropTypes.string.def('rc-steps'),
+    iconPrefix: PropTypes.string.def('rc'),
+    direction: PropTypes.string.def('horizontal'),
+    labelPlacement: PropTypes.string.def('horizontal'),
+    children: PropTypes.any,
+    status: PropTypes.string.def('process'),
+    size: PropTypes.string.def(''),
+    progressDot: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.func,
+    ]).def(false),
+    current: PropTypes.number.def(0),
+  },
+  data () {
+    this.calcStepOffsetWidth = debounce(this.calcStepOffsetWidth, 150)
+    return {
+      flexSupported: true,
+      lastStepOffsetWidth: 0,
+    }
+  },
+  mounted () {
+    this.calcStepOffsetWidth()
+    if (!isFlexSupported()) {
+      this.setState({
+        flexSupported: false,
+      })
+    }
+  },
+  updated () {
+    this.calcStepOffsetWidth()
+  },
+  beforeDestroy () {
+    if (this.calcTimeout) {
+      clearTimeout(this.calcTimeout)
+    }
+    if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) {
+      this.calcStepOffsetWidth.cancel()
+    }
+  },
+  methods: {
+    calcStepOffsetWidth () {
+      if (isFlexSupported()) {
+        return
+      }
+      // Just for IE9
+      const domNode = this.$refs.vcStepsRef
+      if (domNode.children.length > 0) {
+        if (this.calcTimeout) {
+          clearTimeout(this.calcTimeout)
+        }
+        this.calcTimeout = setTimeout(() => {
+        // +1 for fit edge bug of digit width, like 35.4px
+          const lastStepOffsetWidth = (domNode.lastChild.offsetWidth || 0) + 1
+          // Reduce shake bug
+          if (this.state.lastStepOffsetWidth === lastStepOffsetWidth ||
+            Math.abs(this.state.lastStepOffsetWidth - lastStepOffsetWidth) <= 3) {
+            return
+          }
+          this.setState({ lastStepOffsetWidth })
+        })
+      }
+    },
+  },
+  render () {
+    const {
+      prefixCls, direction,
+      labelPlacement, iconPrefix, status, size, current, progressDot,
+      ...restProps
+    } = getOptionProps(this)
+    const { lastStepOffsetWidth, flexSupported } = this
+    const filteredChildren = filterEmpty(this.$slots.default)
+    const lastIndex = filteredChildren.length - 1
+    const adjustedlabelPlacement = progressDot ? 'vertical' : labelPlacement
+    const classString = {
+      [prefixCls]: true,
+      [`${prefixCls}-${direction}`]: true,
+      [`${prefixCls}-${size}`]: size,
+      [`${prefixCls}-label-${adjustedlabelPlacement}`]: direction === 'horizontal',
+      [`${prefixCls}-dot`]: !!progressDot,
+    }
+    const stepsProps = {
+      attrs: {
+        ...restProps,
+      },
+      class: classString,
+      ref: 'vcStepsRef',
+      on: this.$listeners,
+    }
+    return (
+      <div {...stepsProps}>
+        {
+          filteredChildren.map((child, index) => {
+            let className = getClass(child)
+            // fix tail color
+            if (status === 'error' && index === current - 1) {
+              className += ` ${prefixCls}-next-error`
+            }
+            let stepStatus = getValueByProp(child, 'status')
+            if (!stepStatus) {
+              if (index === current) {
+                stepStatus = status
+              } else if (index < current) {
+                stepStatus = 'finish'
+              } else {
+                stepStatus = 'wait'
+              }
+            }
+            const stepStyle = getStyle(child)
+            if (!flexSupported && direction !== 'vertical' && index !== lastIndex) {
+              stepStyle.width = `${100 / lastIndex}%`
+              stepStyle.marginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1)
+            }
+            const stepProps = {
+              props: {
+                stepNumber: `${index + 1}`,
+                prefixCls,
+                iconPrefix,
+                progressDot,
+                status: stepStatus,
+              },
+              on: getEvents(child),
+              class: className,
+              style: stepStyle,
+            }
+            return cloneElement(child, stepProps)
+          })
+        }
+      </div>
+    )
+  },
+}
+</script>
--- a/components/vc-steps/assets/custom-icon.less
+++ b/components/vc-steps/assets/custom-icon.less
@ -0,0 +1,21 @@
+@import 'variables';
+
+.@{stepsPrefixClass}-item-custom {
+  .@{stepsPrefixClass}-item-icon {
+    background: none;
+    border: 0;
+    width: auto;
+    height: auto;
+    > .@{stepsPrefixClass}-icon {
+      font-size: 20px;
+      top: 1px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+  &.@{stepsPrefixClass}-item-process {
+    .@{stepsPrefixClass}-item-icon > .@{stepsPrefixClass}-icon {
+      color: @process-icon-color;
+    }
+  }
+}
--- a/components/vc-steps/assets/iconfont.less
+++ b/components/vc-steps/assets/iconfont.less
@ -0,0 +1,203 @@
+@icon-url               : "//at.alicdn.com/t/font_1434092639_4910953";
+.ie-rotate(@rotation) {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation);
+}
+.rotate(@degrees) {
+  -webkit-transform: rotate(@degrees);
+  -ms-transform: rotate(@degrees); // IE9 only
+  -o-transform: rotate(@degrees);
+  transform: rotate(@degrees);
+}
+.animation(@animation) {
+  -webkit-animation: @animation;
+  -o-animation: @animation;
+  animation: @animation;
+}
+// font-face
+// @icon-url： 字体源文件的地址
+@font-face {
+  font-family: 'anticon';
+  src: url('@{icon-url}.eot'); /* IE9*/
+  src: url('@{icon-url}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('@{icon-url}.woff') format('woff'), /* chrome、firefox */
+  url('@{icon-url}.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
+  url('@{icon-url}.svg#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.rcicon {
+  position: relative;
+  display: inline-block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+  // 更好地渲染字体
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0px;
+  -moz-osx-font-smoothing: grayscale;
+
+  &:before {
+    display: block;
+    font-family: "anticon" !important;
+  }
+}
+// 方向性图标
+.rcicon-step-backward:before          {content:"\e662";}
+.rcicon-step-forward                  {.ie-rotate(2);}
+.rcicon-step-forward:before           {content:"\e662";.rotate(180deg);}
+.rcicon-fast-backward:before          {content:"\e62a";}
+.rcicon-fast-forward                  {.ie-rotate(2);}
+.rcicon-fast-forward:before           {content:"\e62a";.rotate(180deg);}
+.rcicon-shrink:before                 {content:"\e65f";}
+.rcicon-arrow-salt:before             {content:"\e608";}
+.rcicon-caret-down:before             {content:"\e60f";}
+.rcicon-caret-left                    {.ie-rotate(1);}
+.rcicon-caret-left:before             {content:"\e60f";.rotate(90deg);}
+.rcicon-caret-up                      {.ie-rotate(2);}
+.rcicon-caret-up:before               {content:"\e60f";.rotate(180deg);}
+.rcicon-caret-right                   {.ie-rotate(3);}
+.rcicon-caret-right:before            {content:"\e60f";.rotate(270deg);}
+.rcicon-caret-circle-right:before     {content:"\e60d";}
+.rcicon-caret-circle-left             {.ie-rotate(2);}
+.rcicon-caret-circle-left:before      {content:"\e60d";.rotate(180deg);}
+.rcicon-caret-circle-o-right:before   {content:"\e60e";}
+.rcicon-caret-circle-o-left           {.ie-rotate(2);}
+.rcicon-caret-circle-o-left:before    {content:"\e60e";.rotate(180deg);}
+.rcicon-circle-right:before           {content:"\e602";}
+.rcicon-circle-left                   {.ie-rotate(2);}
+.rcicon-circle-left:before            {content:"\e602";.rotate(180deg);}
+.rcicon-circle-o-right:before         {content:"\e603";}
+.rcicon-circle-o-left                 {.ie-rotate(2);}
+.rcicon-circle-o-left:before          {content:"\e603";.rotate(180deg);}
+.rcicon-double-right:before           {content:"\e604";}
+.rcicon-double-left                   {.ie-rotate(2);}
+.rcicon-double-left:before            {content:"\e604";.rotate(180deg);}
+.rcicon-verticle-right:before         {content:"\e605";}
+.rcicon-verticle-left                 {.ie-rotate(2);}
+.rcicon-verticle-left:before          {content:"\e605";.rotate(180deg);}
+.rcicon-forward:before                {content:"\e630";}
+.rcicon-backward                      {.ie-rotate(2);}
+.rcicon-backward:before               {content:"\e630";.rotate(180deg);}
+.rcicon-rollback:before               {content:"\e65a";}
+.rcicon-retweet:before                {content:"\e659";}
+
+.rcicon-right:before                  {content:"\e611";}
+.rcicon-down                          {.ie-rotate(1);}
+.rcicon-down:before                   {content:"\e611";.rotate(90deg);}
+.rcicon-left                          {.ie-rotate(2);}
+.rcicon-left:before                   {content:"\e611";.rotate(180deg);}
+.rcicon-up                            {.ie-rotate(3);}
+.rcicon-up:before                     {content:"\e611";.rotate(270deg);}
+
+// 提示性图标
+.rcicon-question:before               {content:"\e655";}
+.rcicon-question-circle:before        {content:"\e656";}
+.rcicon-question-circle-o:before      {content:"\e657";}
+.rcicon-plus:before                   {content:"\e651";}
+.rcicon-plus-circle:before            {content:"\e652";}
+.rcicon-plus-circle-o:before          {content:"\e653";}
+.rcicon-pause:before                  {content:"\e64c";}
+.rcicon-pause-circle:before           {content:"\e64d";}
+.rcicon-pause-circle-o:before         {content:"\e64e";}
+.rcicon-minus:before                  {content:"\e646";}
+.rcicon-minus-circle:before           {content:"\e647";}
+.rcicon-minus-circle-o:before         {content:"\e648";}
+.rcicon-info-circle:before            {content:"\e637";}
+.rcicon-info-circle-o:before          {content:"\e638";}
+.rcicon-info:before                   {content:"\e63a";}
+.rcicon-exclamation:before            {content:"\e627";}
+.rcicon-exclamation-circle:before     {content:"\e628";}
+.rcicon-exclamation-circle-o:before   {content:"\e629";}
+.rcicon-cross:before                  {content:"\e61e";}
+.rcicon-cross-circle:before           {content:"\e61f";}
+.rcicon-cross-circle-o:before         {content:"\e620";}
+.rcicon-check:before                  {content:"\e613";}
+.rcicon-check-circle:before           {content:"\e614";}
+.rcicon-check-circle-o:before         {content:"\e615";}
+.rcicon-clock-circle:before           {content:"\e616";}
+.rcicon-clock-circle-o:before         {content:"\e617";}
+
+// 网站通用图标
+.rcicon-lock:before                   {content:"\e641";}
+.rcicon-android:before                {content:"\e601";}
+.rcicon-apple:before                  {content:"\e606";}
+.rcicon-area-chart:before             {content:"\e607";}
+.rcicon-bar-chart:before              {content:"\e609";}
+.rcicon-bars:before                   {content:"\e60a";}
+.rcicon-book:before                   {content:"\e60b";}
+.rcicon-calendar:before               {content:"\e60c";}
+.rcicon-cloud:before                  {content:"\e618";}
+.rcicon-cloud-download:before         {content:"\e619";}
+.rcicon-code:before                   {content:"\e61a";}
+.rcicon-copy:before                   {content:"\e61c";}
+.rcicon-credit-card:before            {content:"\e61d";}
+.rcicon-delete:before                 {content:"\e621";}
+.rcicon-desktop:before                {content:"\e622";}
+.rcicon-download-line:before          {content:"\e623";}
+.rcicon-edit:before                   {content:"\e624";}
+.rcicon-ellipsis:before               {content:"\e625";}
+.rcicon-environment:before            {content:"\e626";}
+.rcicon-file:before                   {content:"\e62c";}
+.rcicon-file-text:before              {content:"\e62d";}
+.rcicon-folder:before                 {content:"\e62e";}
+.rcicon-folder-open:before            {content:"\e62f";}
+.rcicon-github:before                 {content:"\e631";}
+.rcicon-hdd:before                    {content:"\e632";}
+.rcicon-frown:before                  {content:"\e633";}
+.rcicon-meh:before                    {content:"\e634";}
+.rcicon-inbox:before                  {content:"\e635";}
+.rcicon-laptop:before                 {content:"\e63d";}
+.rcicon-large:before                  {content:"\e63e";}
+.rcicon-line-chart:before             {content:"\e63f";}
+.rcicon-link:before                   {content:"\e640";}
+.rcicon-logout:before                 {content:"\e642";}
+.rcicon-mail:before                   {content:"\e643";}
+.rcicon-menu-fold:before              {content:"\e644";}
+.rcicon-menu-unfold:before            {content:"\e645";}
+.rcicon-mobile:before                 {content:"\e649";}
+.rcicon-notification:before           {content:"\e64a";}
+.rcicon-paper-clip:before             {content:"\e64b";}
+.rcicon-picture:before                {content:"\e64f";}
+.rcicon-pie-chart:before              {content:"\e650";}
+.rcicon-poweroff:before               {content:"\e654";}
+.rcicon-reload:before                 {content:"\e658";}
+.rcicon-search:before                 {content:"\e65b";}
+.rcicon-setting:before                {content:"\e65c";}
+.rcicon-share-alt:before              {content:"\e65d";}
+.rcicon-shopping-cart:before          {content:"\e65e";}
+.rcicon-smile:before                  {content:"\e661";}
+.rcicon-tablet:before                 {content:"\e664";}
+.rcicon-tag:before                    {content:"\e665";}
+.rcicon-tags:before                   {content:"\e666";}
+.rcicon-to-top:before                  {content:"\e667";}
+.rcicon-unlock:before                 {content:"\e668";}
+.rcicon-upload:before                 {content:"\e669";}
+.rcicon-user:before                   {content:"\e66a";}
+.rcicon-video-camera:before           {content:"\e66b";}
+.rcicon-windows:before                {content:"\e66c";}
+.rcicon-loading:before {
+  display: inline-block;
+  .animation(loadingCircle 1.0s infinite linear);
+  content:"\e610";
+}
+
+:root {
+  .rcicon-step-forward,
+  .rcicon-fast-forward,
+  .rcicon-left,
+  .rcicon-up,
+  .rcicon-down,
+  .rcicon-caret-left,
+  .rcicon-caret-up,
+  .rcicon-caret-right,
+  .rcicon-caret-circle-left,
+  .rcicon-caret-circle-o-left,
+  .rcicon-circle-left,
+  .rcicon-circle-o-left,
+  .rcicon-double-left,
+  .rcicon-verticle-left,
+  .rcicon-backward {
+    filter: none;
+  }
+}
--- a/components/vc-steps/assets/index.less
+++ b/components/vc-steps/assets/index.less
@ -0,0 +1,168 @@
+@import 'variables';
+
+.@{stepsPrefixClass} {
+  font-size: 0;
+  width: 100%;
+  line-height: 1.5;
+  display: flex;
+
+  &,
+  * {
+    box-sizing: border-box;
+  }
+}
+
+.@{stepsPrefixClass}-item {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  flex: 1;
+  overflow: hidden;
+
+  &:last-child {
+    flex: none;
+  }
+
+  &:last-child &-tail,
+  &:last-child &-title:after {
+    display: none;
+  }
+
+  &-icon,
+  &-content {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  &-icon {
+    border: 1px solid @wait-icon-color;
+    width: 26px;
+    height: 26px;
+    line-height: 26px;
+    text-align: center;
+    border-radius: 26px;
+    font-size: 14px;
+    margin-right: 8px;
+    transition: background-color .3s, border-color .3s;
+
+    > .@{stepsPrefixClass}-icon {
+      line-height: 1;
+      top: -1px;
+      color: @primary-color;
+      position: relative;
+
+      &.rcicon {
+        font-size: 12px;
+        position: relative;
+        top: -2px;
+      }
+    }
+  }
+
+  &-tail {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    top: 12px;
+    padding: 0 10px;
+    &:after {
+      content: '';
+      display: inline-block;
+      background: @wait-tail-color;
+      height: 1px;
+      border-radius: 1px;
+      width: 100%;
+      transition: background .3s;
+    }
+  }
+  &-content {
+    margin-top: 3px;
+  }
+  &-title {
+    font-size: 14px;
+    margin-bottom: 4px;
+    color: #666;
+    font-weight: bold;
+    display: inline-block;
+    padding-right: 10px;
+    position: relative;
+    &:after {
+      content: '';
+      height: 1px;
+      width: 1000px;
+      background: @wait-tail-color;
+      display: block;
+      position: absolute;
+      top: 0.55em;
+      left: 100%;
+    }
+  }
+  &-description {
+    font-size: 12px;
+    color: #999;
+  }
+  .step-item-status(wait);
+  .step-item-status(process);
+  &-process &-icon {
+    background: @process-icon-color;
+    > .@{stepsPrefixClass}-icon {
+      color: #fff;
+    }
+  }
+  .step-item-status(finish);
+  .step-item-status(error);
+
+  &.@{stepsPrefixClass}-next-error .@{stepsPrefixClass}-item-title:after {
+    background: @error-icon-color;
+  }
+}
+
+.@{stepsPrefixClass}-horizontal:not(.@{stepsPrefixClass}-label-vertical) {
+  .@{stepsPrefixClass}-item {
+    margin-right: 10px;
+    &:last-child {
+      margin-right: 0;
+    }
+    &-tail {
+      display: none;
+    }
+    &-description {
+      max-width: @stepDescriptionMaxWidth;
+    }
+  }
+}
+
+.step-item-status(@status) {
+  @icon-color: "@{status}-icon-color";
+  @title-color: "@{status}-title-color";
+  @description-color: "@{status}-description-color";
+  @tail-color: "@{status}-tail-color";
+  &-@{status} &-icon {
+    border-color: @@icon-color;
+    background-color: #fff;
+    > .@{stepsPrefixClass}-icon {
+      color: @@icon-color;
+      .@{stepsPrefixClass}-icon-dot {
+        background: @@icon-color;
+      }
+    }
+  }
+  &-@{status} &-title {
+    color: @@title-color;
+    &:after {
+      background-color: @@tail-color;
+    }
+  }
+  &-@{status} &-description {
+    color: @@description-color;
+  }
+  &-@{status} &-tail:after {
+    background-color: @@tail-color;
+  }
+}
+
+@import 'custom-icon';
+@import 'small';
+@import 'vertical';
+@import 'label-placement';
+@import 'progress-dot';
--- a/components/vc-steps/assets/label-placement.less
+++ b/components/vc-steps/assets/label-placement.less
@ -0,0 +1,30 @@
+@import 'variables';
+
+.@{stepsPrefixClass}-label-vertical {
+  .@{stepsPrefixClass}-item {
+    overflow: visible;
+    &-tail {
+      padding: 0px 24px;
+      margin-left: 48px;
+    }
+    &-content {
+      display: block;
+      text-align: center;
+      margin-top: 8px;
+      width: @stepDescriptionMaxWidth;
+    }
+    &-icon {
+      display: inline-block;
+      margin-left: 36px;
+    }
+    &-title {
+      padding-right: 0;
+      &:after {
+        display: none;
+      }
+    }
+    &-description {
+      text-align: left;
+    }
+  }
+}
--- a/components/vc-steps/assets/progress-dot.less
+++ b/components/vc-steps/assets/progress-dot.less
@ -0,0 +1,39 @@
+@import 'variables';
+
+.@{stepsPrefixClass}-dot {
+  .@{stepsPrefixClass}-item {
+    &-tail {
+      width: 100%;
+      top: 1px;
+      margin: 0 0 0 @stepDescriptionMaxWidth / 2;
+      padding: 0;
+
+      &:after {
+        height: 3px;
+      }
+    }
+    &-icon {
+      padding-right: 0;
+      width: 5px;
+      height: 5px;
+      line-height: 5px;
+      border: 0;
+      margin-left: 48px;
+      .@{stepsPrefixClass}-icon-dot {
+        float: left;
+        width: 100%;
+        height: 100%;
+        border-radius: 2.5px;
+      }
+    }
+    &-process &-icon {
+      top: -1px;
+      width: 7px;
+      height: 7px;
+      line-height: 7px;
+      .@{stepsPrefixClass}-icon-dot {
+        border-radius: 3.5px;
+      }
+    }
+  }
+}
--- a/components/vc-steps/assets/small.less
+++ b/components/vc-steps/assets/small.less
@ -0,0 +1,55 @@
+@import 'variables';
+
+.@{stepsPrefixClass}-small {
+  .@{stepsPrefixClass}-item-icon {
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    text-align: center;
+    border-radius: 18px;
+    font-size: 12px;
+    margin-right: 10px;
+    > .@{stepsPrefixClass}-icon {
+      font-size: 12px;
+      font-size: ~"9px \9"; // ie8-9
+      transform: scale(.75);
+      top: -1px;
+    }
+  }
+  .@{stepsPrefixClass}-item-content {
+    margin-top: 0;
+  }
+  .@{stepsPrefixClass}-item-title {
+    font-size: 12px;
+    margin-bottom: 4px;
+    color: #666;
+    font-weight: bold;
+  }
+  .@{stepsPrefixClass}-item-description {
+    font-size: 12px;
+    color: #999;
+  }
+  .@{stepsPrefixClass}-item-tail {
+    top: 8px;
+    padding: 0 8px;
+    &:after {
+      height: 1px;
+      border-radius: 1px;
+      width: 100%;
+    }
+  }
+
+  .@{stepsPrefixClass}-item-custom .@{stepsPrefixClass}-item-icon  {
+    width: inherit;
+    height: inherit;
+    line-height: inherit;
+    border-radius: 0;
+    border: 0;
+    background: none;
+    > .@{stepsPrefixClass}-icon {
+      font-size: 20px;
+      top: -2.5px;
+      transform: none;
+    }
+  }
+}
--- a/components/vc-steps/assets/variables.less
+++ b/components/vc-steps/assets/variables.less
@ -0,0 +1,19 @@
+@stepsPrefixClass: ~"rc-steps";
+@stepDescriptionMaxWidth: 100px;
+@primary-color: #108ee9;
+@process-icon-color: @primary-color;
+@process-title-color: rgba(0,0,0,.65);
+@process-description-color: @process-title-color;
+@process-tail-color: #e9e9e9;
+@wait-icon-color: #ccc;
+@wait-title-color: gba(0,0,0,.43);
+@wait-description-color: @wait-title-color;
+@wait-tail-color: @process-tail-color;
+@finish-icon-color: @process-icon-color;
+@finish-title-color: @wait-title-color;
+@finish-description-color: @finish-title-color;
+@finish-tail-color: @process-icon-color;
+@error-icon-color: #f50;
+@error-title-color: @error-icon-color;
+@error-description-color: @error-icon-color;
+@error-tail-color: @process-tail-color;
--- a/components/vc-steps/assets/vertical.less
+++ b/components/vc-steps/assets/vertical.less
@ -0,0 +1,53 @@
+@import 'variables';
+
+.@{stepsPrefixClass}-vertical {
+  display: block;
+  .@{stepsPrefixClass}-item {
+    display: block;
+    overflow: visible;
+    &-icon {
+      float: left;
+      &-inner {
+        margin-right: 16px;
+      }
+    }
+    &-content {
+      min-height: 48px;
+      overflow: hidden;
+      display: block;
+    }
+    &-title {
+      line-height: 26px;
+      &:after {
+        display: none;
+      }
+    }
+    &-description {
+      padding-bottom: 12px;
+    }
+    &-tail {
+      position: absolute;
+      left: 13px;
+      top: 0;
+      height: 100%;
+      width: 1px;
+      padding: 30px 0 4px 0;
+      &:after {
+        height: 100%;
+        width: 1px;
+      }
+    }
+  }
+
+  &.@{stepsPrefixClass}-small {
+    .@{stepsPrefixClass}-item-tail {
+      position: absolute;
+      left: 9px;
+      top: 0;
+      padding: 22px 0 4px 0;
+    }
+    .@{stepsPrefixClass}-item-title {
+      line-height: 18px;
+    }
+  }
+}
--- a/components/vc-steps/demo/alternativeLabel.vue
+++ b/components/vc-steps/demo/alternativeLabel.vue
@ -0,0 +1,25 @@
+<script>
+import Steps, { Step } from '../index'
+import '../assets/index.less'
+import '../assets/iconfont.less'
+
+export default {
+  data () {
+    return {
+      description: '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊',
+    }
+  },
+  render () {
+    const { description } = this
+    return (
+      <Steps labelPlacement='vertical' current={1}>
+        <Step title='已完成' description={description} />
+        <Step title='进行中' description={description} />
+        <Step title='待运行' description={description} />
+        <Step title='待运行' description={description} />
+        <Step title='待运行' description={description} />
+      </Steps>
+    )
+  },
+}
+</script>
--- a/components/vc-steps/demo/composable.vue
+++ b/components/vc-steps/demo/composable.vue
@ -0,0 +1,24 @@
+<script>
+import Steps, { Step } from '../index'
+import '../assets/index.less'
+import '../assets/iconfont.less'
+
+export default {
+  data () {
+    return {
+      description: '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊',
+    }
+  },
+  render () {
+    const { description } = this
+    return (
+      <Steps current={1}>
+        <Step title='已完成' description={description} />
+        <Step title='进行中' description={description} />
+        <Step title='进行中' description={description} style={{ fontWeight: 'bold', fontStyle: 'italic' }}/>
+        <Step title='待运行' description={description} />
+      </Steps>
+    )
+  },
+}
+</script>
--- a/components/vc-steps/demo/customIcon.vue
+++ b/components/vc-steps/demo/customIcon.vue
@ -0,0 +1,23 @@
+<script>
+import Steps, { Step } from '../index'
+import '../assets/index.less'
+import '../assets/iconfont.less'
+
+export default {
+  data () {
+    return {
+
+    }
+  },
+  render () {
+    const Icon = ({ type }) => <i className={`rcicon rcicon-${type}`} />
+    return (
+      <Steps current={1}>
+        <Step title='步骤1' icon={<Icon type='cloud' />} />
+        <Step title='步骤2' icon='apple' />
+        <Step title='步骤3' icon='github' />
+      </Steps>
+    )
+  },
+}
+</script>
--- a/components/vc-steps/index.js
+++ b/components/vc-steps/index.js
@ -0,0 +1,7 @@
+import Steps from './Steps'
+import Step from './Step'
+
+Steps.Step = Step
+
+export { Step }
+export default Steps
--- a/contributors.md
+++ b/contributors.md
@ -48,11 +48,11 @@ Badge  |  done
 Breadcrumb |  done
 Card  | done
 Collapse | done
-Progress
-Slider
 Spin | done
-Steps
 Switch | done
+Steps
+Progress
+Slider
 Table
 Timeline
 Transfer
--- a/examples/routes.js
+++ b/examples/routes.js
@ -3,7 +3,7 @@ const AsyncComp = () => {
  const hashs = window.location.hash.split('/')
  const d = hashs[hashs.length - 1]
  return {
-    component: import(`../components/vc-pagination/demo/${d}.vue`),
+    component: import(`../components/vc-steps/demo/${d}`),
  }
 }
 export default [