feat(Progress): add track-color prop (youzan#4789)

peiyaoyao · Oct 20, 2019 · 95598e8 · 95598e8
1 parent 4c2cf8e
commit 95598e8
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/src/progress/README.md b/src/progress/README.md
@@ -68,6 +68,7 @@ Use `pivot-text` to custom text，use `color` to custom bar color
 | stroke-width | Stroke width | *string \| number* | `4px` | 2.2.1 |
 | show-pivot | Whether to show text | *boolean* | `true` | - |
 | color | Color | *string* | `#1989fa` | - |
+| text-color | Text color | *string* | `#fff` | - |
+| track-color | Track color | *string* | `#e5e5e5` | 2.2.9 |
 | pivot-text | Text | *string* | percentage | - |
 | pivot-color | Text background color | *string* | inherit progress color | - |
-| text-color | Text color | *string* | `#fff` | - |
diff --git a/src/progress/README.zh-CN.md b/src/progress/README.zh-CN.md
@@ -71,6 +71,7 @@ Vue.use(Progress);
 | stroke-width | 进度条粗细，默认单位为`px` | *string \| number* | `4px` | 2.2.1 |
 | show-pivot | 是否显示进度文字 | *boolean* | `true` | - |
 | color | 进度条颜色 | *string* | `#1989fa` | - |
-| text-color | 进度条文字颜色 | *string* | `#fff` | - |
+| text-color | 进度文字颜色 | *string* | `#fff` | - |
+| track-color | 轨道颜色 | *string* | `#e5e5e5` | 2.2.9 |
 | pivot-text | 文字显示 | *string* | 百分比文字 | - |
 | pivot-color | 文字背景色 | *string* | 与进度条颜色一致 | - |
diff --git a/src/progress/index.js b/src/progress/index.js
@@ -8,6 +8,7 @@ export default createComponent({
     inactive: Boolean,
     pivotText: String,
     pivotColor: String,
+    trackColor: String,
     strokeWidth: [String, Number],
     percentage: {
       type: Number,
@@ -70,12 +71,10 @@ export default createComponent({
       width: (this.progressWidth * percentage) / 100 + 'px'
     };
 
-    let wrapperStyle;
-    if (this.strokeWidth) {
-      wrapperStyle = {
-        height: addUnit(this.strokeWidth)
-      };
-    }
+    const wrapperStyle = {
+      background: this.trackColor,
+      height: addUnit(this.strokeWidth)
+    };
 
     return (
       <div class={bem()} style={wrapperStyle}>

diff --git a/src/progress/test/index.spec.js b/src/progress/test/index.spec.js
@@ -16,3 +16,13 @@ test('calc width', async () => {
   await later();
   expect(wrapper).toMatchSnapshot();
 });
+
+test('track color prop', async () => {
+  const wrapper = mount(Progress, {
+    propsData: {
+      trackColor: 'green'
+    }
+  });
+
+  expect(wrapper.element.style.background).toEqual('green');
+});