From 61a07db24300d1059f2463ec71292c01d501d3a7 Mon Sep 17 00:00:00 2001
From: "mo.duan" <mo.duan@tendcloud.com>
Date: Fri, 6 Sep 2019 15:16:25 +0800
Subject: [PATCH] Progress add new prop: text-inside

Progress add new prop: text-inside
---
 examples/routers/progress.vue        |  1 +
 src/components/progress/progress.vue |  8 ++++++--
 src/styles/components/progress.less  | 14 ++++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/examples/routers/progress.vue b/examples/routers/progress.vue
index 05afcc2b..3bb7b21a 100644
--- a/examples/routers/progress.vue
+++ b/examples/routers/progress.vue
@@ -11,6 +11,7 @@
         <Progress  :percent="65" status="wrong"></Progress>
         <Progress  :percent="100"></Progress>
         <Progress  :percent="25" hide-info></Progress>
+        <Progress :percent="10" :stroke-width="20" text-inside></Progress>
     </div>
 </template>
 <script>
diff --git a/src/components/progress/progress.vue b/src/components/progress/progress.vue
index 06cbd4bc..5587239a 100644
--- a/src/components/progress/progress.vue
+++ b/src/components/progress/progress.vue
@@ -2,7 +2,7 @@
     <div :class="wrapClasses">
         <div :class="outerClasses">
             <div :class="innerClasses">
-                <div :class="bgClasses" :style="bgStyle"></div><div :class="successBgClasses" :style="successBgStyle"></div>
+                <div :class="bgClasses" :style="bgStyle"><div class="ivu-progress-inner-text" v-if="textInside">{{ percent }}%</div></div><div :class="successBgClasses" :style="successBgStyle"></div>
             </div>
         </div>
         <span v-if="!hideInfo" :class="textClasses">
@@ -55,6 +55,10 @@
             },
             strokeColor: {
                 type: String
+            },
+            textInside: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -108,7 +112,7 @@
                     `${prefixCls}`,
                     `${prefixCls}-${this.currentStatus}`,
                     {
-                        [`${prefixCls}-show-info`]: !this.hideInfo,
+                        [`${prefixCls}-show-info`]: !this.hideInfo && !this.textInside,
                         [`${prefixCls}-vertical`]: this.vertical
 
                     }
diff --git a/src/styles/components/progress.less b/src/styles/components/progress.less
index f0d8cc75..b933ff0f 100644
--- a/src/styles/components/progress.less
+++ b/src/styles/components/progress.less
@@ -35,6 +35,13 @@
         border-radius: 100px;
         vertical-align: middle;
         position: relative;
+        &-text{
+            display: inline-block;
+            vertical-align: middle;
+            color: #fff;
+            font-size: 12px;
+            margin: 0 6px;
+        }
     }
     &-vertical &-inner {
         height: 100%;
@@ -52,10 +59,17 @@
     }
 
     &-bg {
+        text-align: right;
         border-radius: 100px;
         background-color: @primary-color;
         transition: all @transition-time linear;
         position: relative;
+        &:after{
+            content: '';
+            display: inline-block;
+            height: 100%;
+            vertical-align: middle;
+        }
     }
     &-success-bg{
         border-radius: 100px;