docs(PullRefresh): add custom tip demo

This commit is contained in:
陈嘉涵
2020-01-10 11:18:00 +08:00
committed by neverland
parent 028747c354
commit 789112a350
7 changed files with 155 additions and 11 deletions
+42 -3
View File
@@ -36,13 +36,13 @@ export default {
this.$toast('刷新成功');
this.isLoading = false;
this.count++;
}, 500);
}, 1000);
}
}
}
```
### 刷新成功提示
### 成功提示
通过`success-text`可以设置刷新成功后的顶部提示文案
@@ -56,6 +56,45 @@ export default {
</van-pull-refresh>
```
### 自定义提示
通过插槽可以自定义下拉刷新过程中的提示内容
```html
<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
<!-- 下拉提示,通过 scale 实现一个缩放效果 -->
<img
class="doge"
slot="pulling"
slot-scope="props"
src="https://img.yzcdn.cn/vant/doge.png"
:style="{ transform: `scale(${props.distance / 80})` }"
>
<!-- 释放提示 -->
<img
class="doge"
slot="loosing"
src="https://img.yzcdn.cn/vant/doge.png"
>
<!-- 加载提示 -->
<img
class="doge"
slot="loading"
src="https://img.yzcdn.cn/vant/doge-fire.jpg"
>
<p>刷新次数: {{ count }}</p>
</van-pull-refresh>
<style>
.doge {
width: 140px;
height: 72px;
margin-top: 8px;
border-radius: 4px;
}
</style>
```
## API
### Props
@@ -69,7 +108,7 @@ export default {
| success-text | 刷新成功提示文案 | *string* | - | - |
| success-duration | 刷新成功提示展示时长(ms) | *number* | `500` | - |
| animation-duration | 动画时长 | *number* | `300` | - |
| head-height | 顶部内容高度 | *number* | `50` | - |
| head-height | 顶部内容高度 | *number* | `50` | 2.4.2 |
| disabled | 是否禁用下拉刷新 | *boolean* | `false` | - |
### Events