add vertical progressbar

Rijn
1 parent 7f08fb51
Showing 3 changed files with 39 additions and 2 deletions Show diff stats
examples/routers/progress.vue
src/components/progress/progress.vue
src/styles/components/progress.less
@@ -10,6 +10,11 @@
             <Icon type="checkmark-circled"></Icon>
             <span>成功</span>
         </i-progress>
+        <i-progress :percent="percent"></i-progress>
+        <div style="height: 150px">
+            <i-progress vertical :percent="percent" :stroke-width="20" hide-info></i-progress>
+            <i-progress vertical :percent="percent"></i-progress>
+        </div>
     </div>
 </template>
 <script>
@@ -43,6 +43,10 @@
             strokeWidth: {
                 type: Number,
                 default: 10
+            },
+            vertical: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -68,7 +72,10 @@
                 return type;
             },
             bgStyle () {
-                return {
+                return this.vertical ? {
+                    height: `${this.percent}%`,
+                    width: `${this.strokeWidth}px`
+                } : {
                     width: `${this.percent}%`,
                     height: `${this.strokeWidth}px`
                 };
@@ -78,7 +85,8 @@
                     `${prefixCls}`,
                     `${prefixCls}-${this.currentStatus}`,
                     {
-                        [`${prefixCls}-show-info`]: !this.hideInfo
+                        [`${prefixCls}-show-info`]: !this.hideInfo,
+                        [`${prefixCls}-vertical`]: this.vertical
  
                     }
                 ];
@@ -2,7 +2,13 @@
  
 .@{progress-prefix-cls} {
     display: inline-block;
+
     width: 100%;
+    &-vertical {
+        height: 100%;
+        width: auto;
+    }
+
     font-size: @font-size-small;
     position: relative;
  
@@ -17,6 +23,10 @@
             margin-right: -55px;
         }
     }
+    &-vertical &-outer {
+        height: 100%;
+        width: auto;
+    }
  
     &-inner {
         display: inline-block;
@@ -25,6 +35,20 @@
         border-radius: 100px;
         vertical-align: middle;
     }
+    &-vertical &-inner {
+        height: 100%;
+        width: auto;
+
+        & > *, &:after {
+            display: inline-block;
+            vertical-align: bottom;
+        }
+
+        &:after {
+            content: '';
+            height: 100%;
+        }
+    }
  
     &-bg {
         border-radius: 100px;