Merge cde08ce into 5390f40

ElemeFE · Nov 3, 2021 · ea1ec7b · ea1ec7b
2 parents 5390f40 + cde08ce
commit ea1ec7b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/packages/progress/src/progress.vue b/packages/progress/src/progress.vue
@@ -17,7 +17,7 @@
     <div class="el-progress-bar" v-if="type === 'line'">
       <div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
         <div class="el-progress-bar__inner" :style="barStyle">
-          <div class="el-progress-bar__innerText" v-if="showText && textInside">{{content}}</div>
+          <div class="el-progress-bar__innerText" :style="{fontSize: progressTextSize + 'px'}" v-if="showText && textInside">{{content}}</div>
         </div>
       </div>
     </div>

diff --git a/packages/theme-chalk/src/progress.scss b/packages/theme-chalk/src/progress.scss
@@ -6,12 +6,17 @@
   position: relative;
   line-height: 1;
 
+  @include m(line) {
+    display: table;
+    width: 100%;
+  }
+
   @include e(text) {
     font-size:14px;
     color: $--color-text-regular;
-    display: inline-block;
+    display: table-cell;
     vertical-align: middle;
-    margin-left: 10px;
+    padding-left: 10px;
     line-height: 1;
 
     i {
@@ -30,6 +35,7 @@
       width: 100%;
       text-align: center;
       margin: 0;
+      padding: 0;
       transform: translate(0, -50%);
 
       i {
@@ -91,11 +97,9 @@
 }
 
 @include b(progress-bar) {
-  padding-right: 50px;
-  display: inline-block;
+  display: table-cell;
   vertical-align: middle;
   width: 100%;
-  margin-right: -55px;
   box-sizing: border-box;
 
   @include e(outer) {

diff --git a/test/unit/specs/progress.spec.js b/test/unit/specs/progress.spec.js
@@ -98,10 +98,11 @@ describe('Progress', () => {
   it('should work with stroke-width', () => {
     vm = createVue({
       template: `
-        <el-progress :text-inside="true" :stroke-width="36" :percentage="0"></el-progress>
+        <el-progress :text-inside="true" :stroke-width="50" :percentage="0"></el-progress>
       `
     }, true);
-    expect(vm.$el.querySelector('.el-progress-bar__innerText').offsetTop).to.be.equal(12);
+    expect(vm.$el.querySelector('.el-progress-bar__innerText').offsetTop).to.be.equal(9);
+    expect(vm.$el.querySelector('.el-progress-bar__innerText').style.fontSize).to.be.equal('32px');
   });
   it('color', () => {
     vm = createVue({