Merge pull request #2018 from JakeLaoyu/feat/progress-add-stroke-width-prop

feat(Progress): add stroke-width prop

example/pages/progress/index.wxml

@@ -2,6 +2,10 @@
   <van-progress custom-class="progress" percentage="50" />
 </demo-block>
 
+<demo-block title="线条粗细">
+  <van-progress custom-class="progress" stroke-width="8" percentage="50" />
+</demo-block>
+
 <demo-block title="置灰">
   <van-progress custom-class="progress" inactive percentage="50" />
 </demo-block>

packages/progress/README.md

@@ -19,6 +19,14 @@
 <van-progress percentage="50" />
 ```
 
+### 线条粗细
+
+通过`stroke-width`可以设置进度条的粗细
+
+```html
+<van-progress :percentage="50" stroke-width="8" />
+```
+
 ### 置灰
 
 ```html

packages/progress/index.ts

@@ -1,5 +1,6 @@
 import { VantComponent } from '../common/component';
 import { BLUE } from '../common/color';
+import { addUnit } from '../common/utils';
 
 VantComponent({
   props: {
@@ -18,6 +19,24 @@ VantComponent({
     textColor: {
       type: String,
       value: '#fff'
+    },
+    strokeWidth: {
+      type: null,
+      observer: 'setStrokeWidthUnit'
+    }
+  },
+
+  data() {
+    return {
+      strokeWidthUnit: '4px'
+    };
+  },
+
+  methods: {
+    setStrokeWidthUnit(val) {
+      this.setData({
+        strokeWidthUnit: addUnit(val)
+      });
     }
   }
 });

packages/progress/index.wxml

@@ -1,6 +1,6 @@
 <wxs src="./index.wxs" module="getters" />
 
-<view class="van-progress custom-class">
+<view class="van-progress custom-class" style="height: {{ strokeWidthUnit }};">
   <view
     class="van-progress__portion"
     style="width: {{ percentage }}%; background: {{ inactive ? '#cacaca' : color }}"