mirror of
https://github.com/youzan/vant.git
synced 2026-01-21 01:15:55 +08:00
[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
63
src/pull-refresh/demo/index.vue
Normal file
63
src/pull-refresh/demo/index.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<demo-section name="pull-refresh">
|
||||
<van-pull-refresh
|
||||
v-model="isLoading"
|
||||
@refresh="onRefresh"
|
||||
>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<p>{{ $t('text') }}: {{ count }}</p>
|
||||
</demo-block>
|
||||
</van-pull-refresh>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
text: '刷新次数',
|
||||
success: '刷新成功'
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Refresh Count',
|
||||
success: 'Refresh success'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
isLoading: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onRefresh() {
|
||||
setTimeout(() => {
|
||||
this.$toast(this.$t('success'));
|
||||
this.isLoading = false;
|
||||
this.count++;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../style/var";
|
||||
|
||||
.demo-pull-refresh {
|
||||
background-color: @white;
|
||||
|
||||
.van-pull-refresh {
|
||||
&,
|
||||
&__track {
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
74
src/pull-refresh/en-US.md
Normal file
74
src/pull-refresh/en-US.md
Normal file
@@ -0,0 +1,74 @@
|
||||
# PullRefresh
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { PullRefresh } from 'vant';
|
||||
|
||||
Vue.use(PullRefresh);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
The `refresh` event will be triggered when pull refresh, you should set `v-model` to `false` to reset loading status after process refresh event.
|
||||
|
||||
```html
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
||||
<p>Refresh Count: {{ count }}</p>
|
||||
</van-pull-refresh>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onRefresh() {
|
||||
setTimeout(() => {
|
||||
this.$toast('Refresh Success');
|
||||
this.isLoading = false;
|
||||
this.count++;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-model | Loading status | `Boolean` | - |
|
||||
| pulling-text | Text to show when pulling | `String` | `Pull to refresh...` |
|
||||
| loosing-text | Text to show when loosing | `String` | `Loose to refresh...` |
|
||||
| loading-text | Text to show when loading | `String` | `Loading...` |
|
||||
| success-text | Text to show when loading success | `String` | - |
|
||||
| success-duration | Success text display duration(ms) | `Number` | `500` |
|
||||
| animation-duration | Animation duration | `Number` | `300` |
|
||||
| head-height | Height of head | `Number` | `50` |
|
||||
| disabled | Whether to disable | `Boolean` | `false` |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|------|------|------|
|
||||
| refresh | Triggered when pull refresh | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| default | Default slot |
|
||||
| normal | Content of head when at normal status |
|
||||
| pulling | Content of head when at pulling |
|
||||
| loosing | Content of head when at loosing |
|
||||
| loading | Content of head when at loading |
|
||||
172
src/pull-refresh/index.js
Normal file
172
src/pull-refresh/index.js
Normal file
@@ -0,0 +1,172 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { TouchMixin } from '../mixins/touch';
|
||||
import { getScrollTop, getScrollEventTarget } from '../utils/dom/scroll';
|
||||
import Loading from '../loading';
|
||||
|
||||
const [createComponent, bem, t] = createNamespace('pull-refresh');
|
||||
const TEXT_STATUS = ['pulling', 'loosing', 'success'];
|
||||
|
||||
export default createComponent({
|
||||
mixins: [TouchMixin],
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
successText: String,
|
||||
pullingText: String,
|
||||
loosingText: String,
|
||||
loadingText: String,
|
||||
value: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
successDuration: {
|
||||
type: Number,
|
||||
default: 500
|
||||
},
|
||||
animationDuration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
headHeight: {
|
||||
type: Number,
|
||||
default: 50
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
status: 'normal',
|
||||
height: 0,
|
||||
duration: 0
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
untouchable() {
|
||||
return this.status === 'loading' || this.status === 'success' || this.disabled;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(loading) {
|
||||
this.duration = this.animationDuration;
|
||||
|
||||
if (!loading && this.successText) {
|
||||
this.status = 'success';
|
||||
setTimeout(() => {
|
||||
this.setStatus(0);
|
||||
}, this.successDuration);
|
||||
} else {
|
||||
this.setStatus(loading ? this.headHeight : 0, loading);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.scrollEl = getScrollEventTarget(this.$el);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTouchStart(event) {
|
||||
if (!this.untouchable && this.getCeiling()) {
|
||||
this.duration = 0;
|
||||
this.touchStart(event);
|
||||
}
|
||||
},
|
||||
|
||||
onTouchMove(event) {
|
||||
if (this.untouchable) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.touchMove(event);
|
||||
|
||||
if (!this.ceiling && this.getCeiling()) {
|
||||
this.duration = 0;
|
||||
this.startY = event.touches[0].clientY;
|
||||
this.deltaY = 0;
|
||||
}
|
||||
|
||||
if (this.ceiling && this.deltaY >= 0) {
|
||||
if (this.direction === 'vertical') {
|
||||
this.setStatus(this.ease(this.deltaY));
|
||||
preventDefault(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onTouchEnd() {
|
||||
if (!this.untouchable && this.ceiling && this.deltaY) {
|
||||
this.duration = this.animationDuration;
|
||||
if (this.status === 'loosing') {
|
||||
this.setStatus(this.headHeight, true);
|
||||
this.$emit('input', true);
|
||||
this.$emit('refresh');
|
||||
} else {
|
||||
this.setStatus(0);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getCeiling() {
|
||||
this.ceiling = getScrollTop(this.scrollEl) === 0;
|
||||
return this.ceiling;
|
||||
},
|
||||
|
||||
ease(height) {
|
||||
const { headHeight } = this;
|
||||
return height < headHeight
|
||||
? height
|
||||
: height < headHeight * 2
|
||||
? Math.round(headHeight + (height - headHeight) / 2)
|
||||
: Math.round(headHeight * 1.5 + (height - headHeight * 2) / 4);
|
||||
},
|
||||
|
||||
setStatus(height, isLoading) {
|
||||
this.height = height;
|
||||
|
||||
const status = isLoading
|
||||
? 'loading'
|
||||
: height === 0
|
||||
? 'normal'
|
||||
: height < this.headHeight
|
||||
? 'pulling'
|
||||
: 'loosing';
|
||||
|
||||
if (status !== this.status) {
|
||||
this.status = status;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { status } = this;
|
||||
const text = this[`${status}Text`] || t(status);
|
||||
const style = {
|
||||
transition: `${this.duration}ms`,
|
||||
transform: this.height ? `translate3d(0,${this.height}px, 0)` : ''
|
||||
};
|
||||
|
||||
const Status = this.slots(status) || [
|
||||
TEXT_STATUS.indexOf(status) !== -1 && <div class={bem('text')}>{text}</div>,
|
||||
status === 'loading' && <Loading size="16">{text}</Loading>
|
||||
];
|
||||
|
||||
return (
|
||||
<div class={bem()}>
|
||||
<div
|
||||
class={bem('track')}
|
||||
style={style}
|
||||
onTouchstart={this.onTouchStart}
|
||||
onTouchmove={this.onTouchMove}
|
||||
onTouchend={this.onTouchEnd}
|
||||
onTouchcancel={this.onTouchEnd}
|
||||
>
|
||||
<div class={bem('head')}>{Status}</div>
|
||||
{this.slots()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
23
src/pull-refresh/index.less
Normal file
23
src/pull-refresh/index.less
Normal file
@@ -0,0 +1,23 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-pull-refresh {
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
||||
&__track {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__head {
|
||||
position: absolute;
|
||||
top: -@pull-refresh-head-height;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: @pull-refresh-head-height;
|
||||
overflow: hidden;
|
||||
color: @pull-refresh-head-text-color;
|
||||
font-size: @pull-refresh-head-font-size;
|
||||
line-height: @pull-refresh-head-height;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
14
src/pull-refresh/test/__snapshots__/demo.spec.js.snap
Normal file
14
src/pull-refresh/test/__snapshots__/demo.spec.js.snap
Normal file
@@ -0,0 +1,14 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-pull-refresh">
|
||||
<div class="van-pull-refresh__track" style="transition: 0ms;">
|
||||
<div class="van-pull-refresh__head"></div>
|
||||
<div>
|
||||
<p>刷新次数: 0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
57
src/pull-refresh/test/__snapshots__/index.spec.js.snap
Normal file
57
src/pull-refresh/test/__snapshots__/index.spec.js.snap
Normal file
@@ -0,0 +1,57 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`change head content when pulling down 1`] = `
|
||||
<div class="van-pull-refresh">
|
||||
<div class="van-pull-refresh__track" style="transition: 0ms; transform: translate3d(0,20px, 0);">
|
||||
<div class="van-pull-refresh__head">
|
||||
<div class="van-pull-refresh__text">下拉即可刷新...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`change head content when pulling down 2`] = `
|
||||
<div class="van-pull-refresh">
|
||||
<div class="van-pull-refresh__track" style="transition: 0ms; transform: translate3d(0,75px, 0);">
|
||||
<div class="van-pull-refresh__head">
|
||||
<div class="van-pull-refresh__text">释放即可刷新...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`change head content when pulling down 3`] = `
|
||||
<div class="van-pull-refresh">
|
||||
<div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
|
||||
<div class="van-pull-refresh__head">
|
||||
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 16px; height: 16px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">加载中...</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`change head content when pulling down 4`] = `
|
||||
<div class="van-pull-refresh">
|
||||
<div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
|
||||
<div class="van-pull-refresh__head">
|
||||
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 16px; height: 16px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">加载中...</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`change head content when pulling down 5`] = `
|
||||
<div class="van-pull-refresh">
|
||||
<div class="van-pull-refresh__track" style="transition: 300ms;">
|
||||
<div class="van-pull-refresh__head"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`not in page top 1`] = `
|
||||
<div class="van-pull-refresh">
|
||||
<div class="van-pull-refresh__track" style="transition: 0ms;">
|
||||
<div class="van-pull-refresh__head"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
4
src/pull-refresh/test/demo.spec.js
Normal file
4
src/pull-refresh/test/demo.spec.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
70
src/pull-refresh/test/index.spec.js
Normal file
70
src/pull-refresh/test/index.spec.js
Normal file
@@ -0,0 +1,70 @@
|
||||
import PullRefresh from '..';
|
||||
import { mount, trigger, triggerDrag } from '../../../test/utils';
|
||||
|
||||
test('change head content when pulling down', () => {
|
||||
const wrapper = mount(PullRefresh, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', value => {
|
||||
wrapper.vm.value = value;
|
||||
});
|
||||
|
||||
const track = wrapper.find('.van-pull-refresh__track');
|
||||
|
||||
// pulling
|
||||
trigger(track, 'touchstart', 0, 0);
|
||||
trigger(track, 'touchmove', 0, 20);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
// loosing
|
||||
trigger(track, 'touchmove', 0, 100);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
// loading
|
||||
trigger(track, 'touchend', 0, 100);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
// still loading
|
||||
triggerDrag(track, 0, 100);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
expect(wrapper.emitted('input')).toBeTruthy();
|
||||
expect(wrapper.emitted('refresh')).toBeTruthy();
|
||||
|
||||
// end loading
|
||||
wrapper.vm.value = false;
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('pull a short distance', () => {
|
||||
const wrapper = mount(PullRefresh, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
const track = wrapper.find('.van-pull-refresh__track');
|
||||
triggerDrag(track, 0, 10);
|
||||
expect(wrapper.emitted('input')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('not in page top', () => {
|
||||
const wrapper = mount(PullRefresh, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
window.scrollTop = 100;
|
||||
|
||||
const track = wrapper.find('.van-pull-refresh__track');
|
||||
// ignore touch event when not at page top
|
||||
triggerDrag(track, 0, 100);
|
||||
window.scrollTop = 0;
|
||||
trigger(track, 'touchmove', 0, 100);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
74
src/pull-refresh/zh-CN.md
Normal file
74
src/pull-refresh/zh-CN.md
Normal file
@@ -0,0 +1,74 @@
|
||||
# PullRefresh 下拉刷新
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import { PullRefresh } from 'vant';
|
||||
|
||||
Vue.use(PullRefresh);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
下拉刷新时会触发 `refresh` 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 `v-model` 设置为 `false`，表示加载完成。
|
||||
|
||||
```html
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
||||
<p>刷新次数: {{ count }}</p>
|
||||
</van-pull-refresh>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onRefresh() {
|
||||
setTimeout(() => {
|
||||
this.$toast('刷新成功');
|
||||
this.isLoading = false;
|
||||
this.count++;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| v-model | 是否在加载中 | `Boolean` | - | - |
|
||||
| pulling-text | 下拉过程文案 | `String` | `下拉即可刷新...` | - |
|
||||
| loosing-text | 释放过程文案 | `String` | `释放即可刷新...` | - |
|
||||
| loading-text | 加载过程文案 | `String` | `加载中...` | - |
|
||||
| success-text | 加载成功提示文案 | `String` | - | 1.6.2 |
|
||||
| success-duration | 加载成功提示时长(ms) | `Number` | `500` | 1.6.2 |
|
||||
| animation-duration | 动画时长 | `Number` | `300` | - |
|
||||
| head-height | 顶部内容高度 | `Number` | `50` | - |
|
||||
| disabled | 是否禁用 | `Boolean` | `false` | 1.1.10 |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| refresh | 下拉刷新时触发 | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 自定义内容 |
|
||||
| normal | 非下拉状态时顶部内容 |
|
||||
| pulling | 下拉过程中顶部内容 |
|
||||
| loosing | 释放过程中顶部内容 |
|
||||
| loading | 加载过程中顶部内容 |
|
||||
Reference in New Issue
Block a user