add Steps UI

add Steps UI

components/steps/step.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="wrapClasses">
-        <div :class="[`${prefixCls}-tail`]"></div>
+    <div :class="wrapClasses" :style="styles">
+        <div :class="[`${prefixCls}-tail`]"><i></i></div>
         <div :class="[`${prefixCls}-head`]">
             <div :class="[`${prefixCls}-head-inner`]">
                 <span v-if="!icon && status != 'finish' && status != 'error'">{{ stepNumber }}</span>
@@ -41,7 +41,8 @@
             return {
                 prefixCls: prefixCls,
                 stepNumber: '',
-                nextError: false
+                nextError: false,
+                total: 1
             }
         },
         computed: {
@@ -75,6 +76,11 @@
                         [`${iconPrefixCls}-${icon}`]: icon != ''
                     }
                 ]
+            },
+            styles () {
+                return {
+                    width: `${1/this.total*100}%`
+                }
             }
         },
         watch: {

components/steps/steps.vue

@@ -50,9 +50,14 @@
         },
         methods: {
             updateChildProps (isInit) {
+                const total = this.$children.length;
                 this.$children.forEach((child, index) => {
                     child.stepNumber = index + 1;
 
+                    if (this.direction === 'horizontal') {
+                        child.total = total;
+                    }
+
                     // 如果已存在status,且在初始化时,则略过
                     // todo 如果当前是error,在current改变时需要处理
                     if (!(isInit && child.status)) {