From d87a8854b1991cfc9d417f152d775f69ee248f19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Wed, 4 Sep 2019 15:39:22 +0800
Subject: [PATCH] Progress add new prop: text-inside

---
 examples/routers/progress.vue        |  4 ++++
 src/components/progress/progress.vue | 10 +++++++---
 src/styles/components/progress.less  | 14 ++++++++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/examples/routers/progress.vue b/examples/routers/progress.vue
index 05afcc2b..49a65f0a 100644
--- a/examples/routers/progress.vue
+++ b/examples/routers/progress.vue
@@ -11,6 +11,10 @@
         <Progress  :percent="65" status="wrong"></Progress>
         <Progress  :percent="100"></Progress>
         <Progress  :percent="25" hide-info></Progress>
+
+        <Divider></Divider>
+
+        <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..3e41464d 100644
--- a/src/components/progress/progress.vue
+++ b/src/components/progress/progress.vue
@@ -2,10 +2,10 @@
     <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">
+        <span v-if="!hideInfo && !textInside" :class="textClasses">
             <slot>
                 <span v-if="isStatus" :class="textInnerClasses">
                     <Icon :type="statusIcon"></Icon>
@@ -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;