feat(PullRefresh): some props can be string

This commit is contained in:
陈嘉涵 2020-01-29 15:54:54 +08:00
parent 1917636b87
commit e0cbe958a3
4 changed files with 13 additions and 13 deletions

View File

@ -104,9 +104,9 @@ Use slots to custom tips
| loosing-text | Text to show when loosing | *string* | `Loose to refresh...` | | loosing-text | Text to show when loosing | *string* | `Loose to refresh...` |
| loading-text | Text to show when loading | *string* | `Loading...` | | loading-text | Text to show when loading | *string* | `Loading...` |
| success-text | Text to show when loading success | *string* | - | | success-text | Text to show when loading success | *string* | - |
| success-duration | Success text display duration(ms) | *number* | `500` | | success-duration | Success text display duration(ms) | *number \| string* | `500` |
| animation-duration | Animation duration | *number* | `300` | | animation-duration | Animation duration | *number \| string* | `300` |
| head-height `v2.4.2` | Height of head | *number* | `50` | | head-height `v2.4.2` | Height of head | *number \| string* | `50` |
| disabled | Whether to disable pull refresh | *boolean* | `false` | | disabled | Whether to disable pull refresh | *boolean* | `false` |
### Events ### Events

View File

@ -107,9 +107,9 @@ export default {
| loosing-text | 释放过程提示文案 | *string* | `释放即可刷新...` | | loosing-text | 释放过程提示文案 | *string* | `释放即可刷新...` |
| loading-text | 加载过程提示文案 | *string* | `加载中...` | | loading-text | 加载过程提示文案 | *string* | `加载中...` |
| success-text | 刷新成功提示文案 | *string* | - | | success-text | 刷新成功提示文案 | *string* | - |
| success-duration | 刷新成功提示展示时长(ms) | *number* | `500` | | success-duration | 刷新成功提示展示时长(ms) | *number \| string* | `500` |
| animation-duration | 动画时长 | *number* | `300` | | animation-duration | 动画时长 | *number \| string* | `300` |
| head-height `v2.4.2` | 顶部内容高度 | *number* | `50` | | head-height `v2.4.2` | 顶部内容高度 | *number \| string* | `50` |
| disabled | 是否禁用下拉刷新 | *boolean* | `false` | | disabled | 是否禁用下拉刷新 | *boolean* | `false` |
### Events ### Events

View File

@ -20,7 +20,7 @@
<van-tab :title="$t('customTips')"> <van-tab :title="$t('customTips')">
<van-pull-refresh <van-pull-refresh
v-model="isLoading" v-model="isLoading"
:head-height="80" head-height="80"
@refresh="onRefresh(true)" @refresh="onRefresh(true)"
> >
<template #pulling="{ distance }"> <template #pulling="{ distance }">

View File

@ -28,15 +28,15 @@ export default createComponent({
required: true, required: true,
}, },
successDuration: { successDuration: {
type: Number, type: [Number, String],
default: 500, default: 500,
}, },
animationDuration: { animationDuration: {
type: Number, type: [Number, String],
default: 300, default: 300,
}, },
headHeight: { headHeight: {
type: Number, type: [Number, String],
default: DEFAULT_HEAD_HEIGHT, default: DEFAULT_HEAD_HEIGHT,
}, },
}, },
@ -70,7 +70,7 @@ export default createComponent({
this.duration = this.animationDuration; this.duration = this.animationDuration;
if (loading) { if (loading) {
this.setStatus(this.headHeight, true); this.setStatus(+this.headHeight, true);
} else if (this.slots('success') || this.successText) { } else if (this.slots('success') || this.successText) {
this.showSuccessTip(); this.showSuccessTip();
} else { } else {
@ -122,7 +122,7 @@ export default createComponent({
this.duration = this.animationDuration; this.duration = this.animationDuration;
if (this.status === 'loosing') { if (this.status === 'loosing') {
this.setStatus(this.headHeight, true); this.setStatus(+this.headHeight, true);
this.$emit('input', true); this.$emit('input', true);
// ensure value change can be watched // ensure value change can be watched
@ -136,7 +136,7 @@ export default createComponent({
}, },
ease(distance) { ease(distance) {
const { headHeight } = this; const headHeight = +this.headHeight;
if (distance > headHeight) { if (distance > headHeight) {
if (distance < headHeight * 2) { if (distance < headHeight * 2) {