diff --git a/src/pull-refresh/README.md b/src/pull-refresh/README.md index 54862d268..515fea14b 100644 --- a/src/pull-refresh/README.md +++ b/src/pull-refresh/README.md @@ -42,6 +42,20 @@ export default { } ``` +### Success Tip + +Use `success-text` to set the success prompt after the refresh is successful + +```html + +

Refresh Count: {{ count }}

+ +``` + ## API ### Props @@ -66,10 +80,11 @@ export default { ### Slots -| Name | Description | scoped-slot | +| Name | Description | SlotProps | |------|------|------| | default | Default slot | - | | normal | Content of head when at normal status | - | | pulling | Content of head when at pulling | { distance } | | loosing | Content of head when at loosing | { distance } | | loading | Content of head when at loading | { distance } | +| success | Content of head when succeed | - | diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md index b87738b41..2bc54f836 100644 --- a/src/pull-refresh/README.zh-CN.md +++ b/src/pull-refresh/README.zh-CN.md @@ -42,18 +42,32 @@ export default { } ``` +### 刷新成功提示 + +通过`success-text`可以设置刷新成功后的顶部提示文案 + +```html + +

刷新次数: {{ count }}

+ +``` + ## API ### Props | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| -| v-model | 是否在加载中 | *boolean* | - | - | -| pulling-text | 下拉过程文案 | *string* | `下拉即可刷新...` | - | -| loosing-text | 释放过程文案 | *string* | `释放即可刷新...` | - | -| loading-text | 加载过程文案 | *string* | `加载中...` | - | -| success-text | 加载成功提示文案 | *string* | - | - | -| success-duration | 加载成功提示时长(ms) | *number* | `500` | - | +| v-model | 是否处于加载中状态 | *boolean* | - | - | +| pulling-text | 下拉过程提示文案 | *string* | `下拉即可刷新...` | - | +| loosing-text | 释放过程提示文案 | *string* | `释放即可刷新...` | - | +| loading-text | 加载过程提示文案 | *string* | `加载中...` | - | +| success-text | 刷新成功提示文案 | *string* | - | - | +| success-duration | 刷新成功提示展示时长(ms) | *number* | `500` | - | | animation-duration | 动画时长 | *number* | `300` | - | | head-height | 顶部内容高度 | *number* | `50` | - | | disabled | 是否禁用下拉刷新 | *boolean* | `false` | - | @@ -66,13 +80,14 @@ export default { ### Slots -| 名称 | 说明 | scoped-slot 参数 | +| 名称 | 说明 | SlotProps | |------|------|------| | default | 自定义内容 | - | | normal | 非下拉状态时顶部内容 | - | | pulling | 下拉过程中顶部内容 | { distance: 当前下拉距离 } | | loosing | 释放过程中顶部内容 | { distance: 当前下拉距离 } | | loading | 加载过程中顶部内容 | { distance: 当前下拉距离 } | +| success | 刷新成功提示内容 | - | ## 常见问题 diff --git a/src/pull-refresh/demo/index.vue b/src/pull-refresh/demo/index.vue index 2dbab6ecd..f9b8fe0a3 100644 --- a/src/pull-refresh/demo/index.vue +++ b/src/pull-refresh/demo/index.vue @@ -1,13 +1,22 @@ @@ -16,11 +25,15 @@ export default { i18n: { 'zh-CN': { text: '刷新次数', - success: '刷新成功' + success: '刷新成功', + successTip: '刷新成功提示', + try: '下拉试试' }, 'en-US': { text: 'Refresh Count', - success: 'Refresh success' + success: 'Refresh success', + successTip: 'Success Tip', + try: 'Try it down' } }, @@ -31,10 +44,23 @@ export default { }; }, + computed: { + tips() { + if (this.count) { + return `${this.$t('text')}: ${this.count}`; + } + + return this.$t('try'); + } + }, + methods: { - onRefresh() { + onRefresh(showToast) { setTimeout(() => { - this.$toast(this.$t('success')); + if (showToast) { + this.$toast(this.$t('success')); + } + this.isLoading = false; this.count++; }, 500); @@ -44,7 +70,7 @@ export default { diff --git a/src/pull-refresh/index.js b/src/pull-refresh/index.js index 7f65f61cf..b1bacf3a6 100644 --- a/src/pull-refresh/index.js +++ b/src/pull-refresh/index.js @@ -54,14 +54,12 @@ export default createComponent({ value(loading) { this.duration = this.animationDuration; - if (!loading && this.successText) { - this.status = 'success'; - - setTimeout(() => { - this.setStatus(0); - }, this.successDuration); + if (loading) { + this.setStatus(this.headHeight, true); + } else if (this.slots('success') || this.successText) { + this.showSuccessTip(); } else { - this.setStatus(loading ? this.headHeight : 0, loading); + this.setStatus(0, false); } } }, @@ -173,6 +171,14 @@ export default createComponent({ } return nodes; + }, + + showSuccessTip() { + this.status = 'success'; + + setTimeout(() => { + this.setStatus(0); + }, this.successDuration); } }, diff --git a/src/pull-refresh/test/__snapshots__/demo.spec.js.snap b/src/pull-refresh/test/__snapshots__/demo.spec.js.snap index 836eae87d..2908bbf40 100644 --- a/src/pull-refresh/test/__snapshots__/demo.spec.js.snap +++ b/src/pull-refresh/test/__snapshots__/demo.spec.js.snap @@ -2,11 +2,25 @@ exports[`renders demo correctly 1`] = `
-
-
-
-
-

刷新次数: 0

+
+
+
+ + +
+
+
+
+
+
+
+
+

下拉试试

+
+
+
+
diff --git a/src/pull-refresh/test/__snapshots__/index.spec.js.snap b/src/pull-refresh/test/__snapshots__/index.spec.js.snap index 1cb7b8d68..96cea10fb 100644 --- a/src/pull-refresh/test/__snapshots__/index.spec.js.snap +++ b/src/pull-refresh/test/__snapshots__/index.spec.js.snap @@ -80,6 +80,14 @@ exports[`not in page top 1`] = `
`; +exports[`render success slot 1`] = ` +
+
+
Custom Success
+
+
+`; + exports[`render success text 1`] = `
diff --git a/src/pull-refresh/test/index.spec.js b/src/pull-refresh/test/index.spec.js index 8b442abe2..342e91cb5 100644 --- a/src/pull-refresh/test/index.spec.js +++ b/src/pull-refresh/test/index.spec.js @@ -119,9 +119,7 @@ test('render success text', async () => { }); const track = wrapper.find('.van-pull-refresh__track'); - trigger(track, 'touchstart', 0, 0); - trigger(track, 'touchmove', 0, 100); - trigger(track, 'touchend', 0, 100); + triggerDrag(track, 0, 100); await later(); @@ -136,3 +134,25 @@ test('render success text', async () => { await later(); expect(wrapper).toMatchSnapshot(); }); + +test('render success slot', async () => { + const wrapper = mount(PullRefresh, { + scopedSlots: { + success: () => 'Custom Success' + }, + listeners: { + input(value) { + wrapper.setProps({ value }); + } + } + }); + + const track = wrapper.find('.van-pull-refresh__track'); + triggerDrag(track, 0, 100); + + await later(); + + expect(wrapper.vm.value).toBeTruthy(); + wrapper.setProps({ value: false }); + expect(wrapper).toMatchSnapshot(); +});