diff --git a/src/progress/README.md b/src/progress/README.md index 554712646..bd1b380d7 100644 --- 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 index 6b20f6470..67cd62f2b 100644 --- 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 index d38978d13..f93ab19ea 100644 --- 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 (
diff --git a/src/progress/test/index.spec.js b/src/progress/test/index.spec.js index 69cfbb4e8..6ea8431b5 100644 --- 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'); +});