Progress add prop success-percent

梁灏
1 parent b40e2e96
Showing 4 changed files with 33 additions and 37 deletions Show diff stats
examples/routers/progress.vue
src/components/circle/circle.vue
src/components/progress/progress.vue
src/styles/components/progress.less
 <template>
     <div>
-        <i-progress :percent="percent"></i-progress>
-        <Button-group size="large">
-            <Button icon="ios-plus-empty" @click.native="add"></Button>
-            <Button icon="ios-minus-empty" @click.native="minus"></Button>
-        </Button-group>
-        <i-progress :percent="25" :stroke-width="5"></i-progress>
-        <i-progress :percent="100">
-            <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>
+        <Progress :percent="25"></Progress>
+        <br><br>
+        <Progress :percent="25" :success-percent="10"></Progress>
     </div>
 </template>
 <script>
     export default {
-        data () {
-            return {
-                percent: 0
-            }
-        },
-        methods: {
-            add () {
-                if (this.percent >= 100) {
-                    return false;
-                }
-                this.percent += 10;
-            },
-            minus () {
-                if (this.percent <= 0) {
-                    return false;
-                }
-                this.percent -= 10;
-            }
-        }
+
     }
 </script>
@@ -96,13 +96,13 @@
                     style = {
                         'stroke-dasharray': `${(this.percent / 100) * (this.len - 75)}px ${this.len}px`,
                         'stroke-dashoffset': `-${75 / 2}px`,
-                        'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s'
+                        'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .6s ease 0s, stroke .6s, stroke-width .06s ease .6s'
                     };
                 } else {
                     style = {
                         'stroke-dasharray': `${this.len}px ${this.len}px`,
                         'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
-                        'transition': 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease'
+                        'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
                     };
                 }
                 return style;
@@ -3,6 +3,7 @@
         <div :class="outerClasses">
             <div :class="innerClasses">
                 <div :class="bgClasses" :style="bgStyle"></div>
+                <div :class="successBgClasses" :style="successBgStyle"></div>
             </div>
         </div>
         <span v-if="!hideInfo" :class="textClasses">
@@ -30,6 +31,10 @@
                 type: Number,
                 default: 0
             },
+            successPercent: {
+                type: Number,
+                default: 0
+            },
             status: {
                 validator (value) {
                     return oneOf(value, ['normal', 'active', 'wrong', 'success']);
@@ -80,6 +85,15 @@
                     height: `${this.strokeWidth}px`
                 };
             },
+            successBgStyle () {
+                return this.vertical ? {
+                    height: `${this.successPercent}%`,
+                    width: `${this.strokeWidth}px`
+                } : {
+                    width: `${this.successPercent}%`,
+                    height: `${this.strokeWidth}px`
+                };
+            },
             wrapClasses () {
                 return [
                     `${prefixCls}`,
@@ -105,6 +119,9 @@
             },
             bgClasses () {
                 return `${prefixCls}-bg`;
+            },
+            successBgClasses () {
+                return `${prefixCls}-success-bg`;
             }
         },
         created () {
@@ -34,6 +34,7 @@
         background-color: #f3f3f3;
         border-radius: 100px;
         vertical-align: middle;
+        position: relative;
     }
     &-vertical &-inner {
         height: 100%;
@@ -52,10 +53,18 @@
  
     &-bg {
         border-radius: 100px;
-        background-color: @info-color;
+        background-color: @primary-color;
         transition: all @transition-time linear;
         position: relative;
     }
+    &-success-bg{
+        border-radius: 100px;
+        background-color: @success-color;
+        transition: all @transition-time linear;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
  
     &-text {
         display: inline-block;