Merge branch '2.x' into dev

src/progress/README.md

@@ -62,3 +62,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

@@ -70,3 +70,38 @@ app.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.tsx

@@ -1,5 +1,6 @@
 import { ref, watch, computed, nextTick, reactive, onMounted } from 'vue';
 import { createNamespace, addUnit } from '../utils';
+import { useExpose } from '../composition/use-expose';
 
 const [createComponent, bem] = createNamespace('progress');
 
@@ -36,7 +37,7 @@ export default createComponent({
       props.inactive ? '#cacaca' : props.color
     );
 
-    const setWidth = () => {
+    const resize = () => {
       nextTick(() => {
         state.rootWidth = root.value ? root.value.offsetWidth : 0;
         state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0;
@@ -65,9 +66,9 @@ export default createComponent({
       }
     };
 
-    watch([() => props.showPivot, () => props.pivotText], setWidth);
-
-    onMounted(setWidth);
+    watch([() => props.showPivot, () => props.pivotText], resize);
+    onMounted(resize);
+    useExpose({ resize });
 
     return () => {
       const { trackColor, percentage, strokeWidth } = props;