fix(progress): add text-background props,update variables.scss (#1145) #1142

Author: Drjingfubo

src/packages/__VUE/progress/doc.md

@@ -134,6 +134,7 @@ app.use(Icon);
 | show-text | 是否显示进度条文字内容 | Boolean | true
 | text-inside | 进度条文字显示位置(false:外显，true:内显) | Boolean | false
 | text-color | 进度条文字颜色设置 | String | #333
+| text-background | 进度条文字背景颜色设置 | String | 同进度条颜色
 | status | 进度条当前状态,active(展示动画效果)/icon(展示icon标签) | String | text
 | icon-name | icon名称 | String | checked
 | icon-color | icon颜色 | String | #439422

src/packages/__VUE/progress/index.taro.vue

@@ -12,7 +12,12 @@
           class="nut-progress-text nut-progress-insidetext"
           ref="insideText"
           :id="'nut-progress-insidetext-taro-' + randRef"
-          :style="{ lineHeight: height, left: `${percentage}%`, transform: `translate(-${+percentage}%,-50%)` }"
+          :style="{
+            lineHeight: height,
+            left: `${percentage}%`,
+            transform: `translate(-${+percentage}%,-50%)`,
+            background: textBackground || strokeColor
+          }"
           v-if="showText && textInside"
         >
           <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }}</span>
@@ -71,6 +76,10 @@ export default create({
       tyep: String,
       default: ''
     },
+    textBackground: {
+      tyep: String,
+      default: ''
+    },
     iconName: {
       type: String,
       default: 'checked'

src/packages/__VUE/progress/index.vue

@@ -10,7 +10,12 @@
         <div
           class="nut-progress-text nut-progress-insidetext"
           ref="insideText"
-          :style="{ lineHeight: height, left: `${percentage}%`, transform: `translate(-${+percentage}%,-50%)` }"
+          :style="{
+            lineHeight: height,
+            left: `${percentage}%`,
+            transform: `translate(-${+percentage}%,-50%)`,
+            background: textBackground || strokeColor
+          }"
           v-if="showText && textInside"
         >
           <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
@@ -68,6 +73,10 @@ export default create({
       tyep: String,
       default: ''
     },
+    textBackground: {
+      tyep: String,
+      default: ''
+    },
     iconName: {
       type: String,
       default: 'checked'

src/packages/styles/variables-jdt.scss

@@ -471,7 +471,7 @@ $popover-disable-color: rgba(154, 155, 157, 1) !default;
 
 //progress
 $progress-inner-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
-$progress-insidetext-background: $primary-color !default;
+$progress-insidetext-background: $progress-inner-background-color !default;
 $progress-outer-background-color: rgba(0, 0, 0, 0.15) !default;
 $progress-outer-border-radius: 0 !default;
 $progress-insidetext-border-radius: 10px !default;

src/packages/styles/variables.scss

@@ -496,7 +496,7 @@ $popover-disable-color: rgba(154, 155, 157, 1) !default;
 
 //progress
 $progress-inner-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
-$progress-insidetext-background: $primary-color !default;
+$progress-insidetext-background: $progress-inner-background-color !default;
 $progress-outer-background-color: #f3f3f3 !default;
 $progress-outer-border-radius: 12px !default;
 $progress-insidetext-border-radius: 5px !default;