feat(Progress): add stroke-width prop (#4397)

src/progress/README.md

@@ -19,6 +19,11 @@ Use 'percentage' prop to set current progress
 <van-progress :percentage="50" />
 ```
 
+### Stroke Width
+
+```html
+<van-progress :percentage="50" stroke-width="8" />
+```
 
 ### Inactive
 
@@ -60,6 +65,7 @@ Use `pivot-text` to custom text，use `color` to custom bar color
 |------|------|------|------|------|
 | inactive | Whether to be gray | *boolean* | `false` | - |
 | percentage | Percentage | *number* | `0` | - |
+| stroke-width | Stroke width | *string \| number* | `4px` | 2.2.1 |
 | show-pivot | Whether to show text | *boolean* | `true` | - |
 | color | Color | *string* | `#1989fa` | - |
 | pivot-text | Text | *string* | percentage | - |

src/progress/README.zh-CN.md

@@ -19,8 +19,18 @@ Vue.use(Progress);
 <van-progress :percentage="50" />
 ```
 
+### 线条粗细
+
+通过`stroke-width`可以设置进度条的粗细
+
+```html
+<van-progress :percentage="50" stroke-width="8" />
+```
+
 ### 置灰
 
+设置`inactive`属性后进度条将置灰
+
 ```html
 <van-progress inactive :percentage="50" />
 ```
@@ -58,6 +68,7 @@ Vue.use(Progress);
 |------|------|------|------|------|
 | inactive | 是否置灰 | *boolean* | `false` | - |
 | percentage | 进度百分比 | *number* | `0` | - |
+| stroke-width | 进度条粗细，默认单位为`px` | *string \| number* | `4px` | 2.2.1 |
 | show-pivot | 是否显示进度文字 | *boolean* | `true` | - |
 | color | 进度条颜色 | *string* | `#1989fa` | - |
 | text-color | 进度条文字颜色 | *string* | `#fff` | - |

src/progress/demo/index.vue

@@ -4,24 +4,17 @@
       <van-progress :percentage="50" />
     </demo-block>
 
+    <demo-block v-if="!$attrs.weapp" :title="$t('strokeWidth')">
+      <van-progress :percentage="50" stroke-width="8" />
+    </demo-block>
+
     <demo-block :title="$t('title2')">
-      <van-progress
-        inactive
-        :percentage="50"
-      />
+      <van-progress inactive :percentage="50" />
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-progress
-        color="#f2826a"
-        :percentage="25"
-        :pivot-text="$t('orange')"
-      />
-      <van-progress
-        color="#ee0a24"
-        :percentage="50"
-        :pivot-text="$t('red')"
-      />
+      <van-progress color="#f2826a" :percentage="25" :pivot-text="$t('orange')" />
+      <van-progress color="#ee0a24" :percentage="50" :pivot-text="$t('red')" />
       <van-progress
         :percentage="75"
         :pivot-text="$t('purple')"
@@ -37,11 +30,13 @@ export default {
   i18n: {
     'zh-CN': {
       title2: '置灰',
-      title3: '样式定制'
+      title3: '样式定制',
+      strokeWidth: '线条粗细'
     },
     'en-US': {
       title2: 'Inactive',
-      title3: 'Custom Style'
+      title3: 'Custom Style',
+      strokeWidth: 'Stroke Width'
     }
   }
 };

src/progress/index.js

@@ -1,4 +1,4 @@
-import { createNamespace, isDef } from '../utils';
+import { createNamespace, isDef, addUnit } from '../utils';
 import { BLUE, WHITE } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('progress');
@@ -8,6 +8,7 @@ export default createComponent({
     inactive: Boolean,
     pivotText: String,
     pivotColor: String,
+    strokeWidth: [String, Number],
     percentage: {
       type: Number,
       required: true,
@@ -69,8 +70,15 @@ export default createComponent({
       width: (this.progressWidth * percentage) / 100 + 'px'
     };
 
+    let wrapperStyle;
+    if (this.strokeWidth) {
+      wrapperStyle = {
+        height: addUnit(this.strokeWidth)
+      };
+    }
+
     return (
-      <div class={bem()}>
+      <div class={bem()} style={wrapperStyle}>
         <span class={bem('portion')} style={portionStyle}>
           {showPivot && (
             <span ref="pivot" style={pivotStyle} class={bem('pivot')}>

src/progress/test/__snapshots__/demo.spec.js.snap

@@ -5,6 +5,9 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-progress"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(25, 137, 250);">50%</span></span></div>
   </div>
+  <div>
+    <div class="van-progress" style="height: 8px;"><span class="van-progress__portion" style="background: rgb(25, 137, 250); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(25, 137, 250);">50%</span></span></div>
+  </div>
   <div>
     <div class="van-progress"><span class="van-progress__portion" style="background: rgb(202, 202, 202); width: 0px;"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); left: 0px; background: rgb(202, 202, 202);">50%</span></span></div>
   </div>

src/progress/test/index.spec.js

@@ -1,16 +1,18 @@
 import Progress from '..';
-import { mount } from '../../../test/utils';
+import { mount, later } from '../../../test/utils';
 
-test('calc width', () => {
+test('calc width', async () => {
   const wrapper = mount(Progress, {
     propsData: {
       showPivot: false,
       percentage: 100
     }
   });
+  await later();
   expect(wrapper).toMatchSnapshot();
 
   wrapper.vm.showPivot = true;
   wrapper.vm.pivotText = 'test';
+  await later();
   expect(wrapper).toMatchSnapshot();
 });