feat(Progress): add resize method #5161

src/progress/README.md

@@ -61,3 +61,11 @@ Use `pivot-text` to custom text，use `color` to custom bar color.
 | text-color | Pivot text color | _string_ | `white` |
 | inactive | Whether to be gray | _boolean_ | `false` |
 | show-pivot | Whether to show text | _boolean_ | `true` |
+
+### Methods
+
+Use [ref](https://vuejs.org/v2/api/#ref) to get Progress instance and call instance methods.
+
+| Name | Description | Attribute | Return value |
+| --- | --- | --- | --- |
+| resize | Resize Progress when container element resized or visibility changed | - | - |

src/progress/README.zh-CN.md

@@ -69,3 +69,38 @@ Vue.use(Progress);
 | text-color | 进度文字颜色 | _string_ | `white` |
 | inactive | 是否置灰 | _boolean_ | `false` |
 | show-pivot | 是否显示进度文字 | _boolean_ | `true` |
+
+### 方法
+
+通过 ref 可以获取到 Progress 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
+
+| 方法名 | 说明                                         | 参数 | 返回值 |
+| ------ | -------------------------------------------- | ---- | ------ |
+| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | -    | -      |
+
+## 常见问题
+
+### 组件从隐藏状态切换到显示状态时，渲染不正确？
+
+Progress 组件在挂载时，会获取自身的宽度，并计算出进度条的样式。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示正确的进度。
+
+#### 解决方法
+
+方法一，如果是使用 `v-show` 来控制组件展示的，则替换为 `v-if` 即可解决此问题：
+
+```html
+<!-- Before -->
+<van-progress v-show="show" />
+<!-- After -->
+<van-progress v-if="show" />
+```
+
+方法二，调用组件的 resize 方法来主动触发重绘：
+
+```html
+<van-progress v-show="show" ref="progress" />
+```
+
+```js
+this.$refs.progress.resize();
+```

src/progress/index.js

@@ -30,16 +30,17 @@ export default createComponent({
   },
 
   mounted() {
-    this.setWidth();
+    this.resize();
   },
 
   watch: {
-    showPivot: 'setWidth',
-    pivotText: 'setWidth',
+    showPivot: 'resize',
+    pivotText: 'resize',
   },
 
   methods: {
-    setWidth() {
+    // @exposed-api
+    resize() {
       this.$nextTick(() => {
         this.progressWidth = this.$el.offsetWidth;
         this.pivotWidth = this.$refs.pivot ? this.$refs.pivot.offsetWidth : 0;

types/index.d.ts

@@ -19,6 +19,7 @@ import { List } from './list';
 import { Locale } from './locale';
 import { Notify } from './notify';
 import { Picker } from './picker';
+import { Progress } from './progress';
 import { Sku } from './sku';
 import { Swipe } from './swipe';
 import { SwipeCell } from './swipe-cell';
@@ -65,7 +66,6 @@ export class Pagination extends VanComponent {}
 export class Panel extends VanComponent {}
 export class PasswordInput extends VanComponent {}
 export class Popup extends VanComponent {}
-export class Progress extends VanComponent {}
 export class PullRefresh extends VanComponent {}
 export class Radio extends VanComponent {}
 export class RadioGroup extends VanComponent {}
@@ -110,6 +110,7 @@ export {
   Locale,
   Notify,
   Picker,
+  Progress,
   Sku,
   Swipe,
   SwipeCell,

types/progress.d.ts

@@ -0,0 +1,5 @@
+import { VanComponent } from './component';
+
+export class Progress extends VanComponent {
+  resize(): void;
+}