[improvement] PullRerefresh: use dynamic slot (#2409)

This commit is contained in:
neverland 2018-12-30 21:42:51 +08:00 committed by GitHub
parent d0fa4152dc
commit 4572681eed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 34 additions and 67 deletions

View File

@ -42,11 +42,11 @@ Locale.add({
custom: '自定义', custom: '自定义',
username: '用户名', username: '用户名',
password: '密码', password: '密码',
loading: '加载状态',
disabled: '禁用状态', disabled: '禁用状态',
uneditable: '不可编辑', uneditable: '不可编辑',
basicUsage: '基础用法', basicUsage: '基础用法',
advancedUsage: '高级用法', advancedUsage: '高级用法',
loadingStatus: '加载状态',
usernamePlaceholder: '请输入用户名', usernamePlaceholder: '请输入用户名',
passwordPlaceholder: '请输入密码' passwordPlaceholder: '请输入密码'
}, },
@ -70,7 +70,7 @@ Locale.add({
custom: 'Custom', custom: 'Custom',
username: 'Username', username: 'Username',
password: 'Password', password: 'Password',
loading: 'Loading', loadingStatus: 'Loading',
disabled: 'Disabled', disabled: 'Disabled',
uneditable: 'Uneditable', uneditable: 'Uneditable',
basicUsage: 'Basic Usage', basicUsage: 'Basic Usage',

View File

@ -39,7 +39,7 @@
</van-button> </van-button>
</demo-block> </demo-block>
<demo-block :title="$t('loading')"> <demo-block :title="$t('loadingStatus')">
<van-button <van-button
loading loading
type="primary" type="primary"

View File

@ -8,7 +8,7 @@
<slot name="loading"> <slot name="loading">
<loading :class="b('loading-icon')" /> <loading :class="b('loading-icon')" />
<span <span
v-text="loadingText || $t('loadingTip')" v-text="loadingText || $t('loading')"
:class="b('loading-text')" :class="b('loading-text')"
/> />
</slot> </slot>

View File

@ -9,7 +9,6 @@ exports[`renders demo correctly 1`] = `
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<!----> <!---->
<!----> <!---->
<!---->
</div> </div>
<div class="van-list"> <div class="van-list">
<!----> <!---->

View File

@ -6,7 +6,7 @@ export default {
cancel: 'Cancel', cancel: 'Cancel',
delete: 'Delete', delete: 'Delete',
complete: 'Complete', complete: 'Complete',
loadingTip: 'Loading...', loading: 'Loading...',
telEmpty: 'Please fill in the tel', telEmpty: 'Please fill in the tel',
nameEmpty: 'Please fill in the name', nameEmpty: 'Please fill in the name',
confirmDelete: 'Are you sure you want to delete?', confirmDelete: 'Are you sure you want to delete?',

View File

@ -6,7 +6,7 @@ export default {
cancel: 'İptal', cancel: 'İptal',
delete: 'Sil', delete: 'Sil',
complete: 'Tamamla', complete: 'Tamamla',
loadingTip: 'Yükleniyor...', loading: 'Yükleniyor...',
telEmpty: 'Lütfen tel. no giriniz', telEmpty: 'Lütfen tel. no giriniz',
nameEmpty: 'Lütfen isim giriniz', nameEmpty: 'Lütfen isim giriniz',
confirmDelete: 'Silmek istediğinize emin misiniz?', confirmDelete: 'Silmek istediğinize emin misiniz?',

View File

@ -6,7 +6,7 @@ export default {
cancel: '取消', cancel: '取消',
delete: '删除', delete: '删除',
complete: '完成', complete: '完成',
loadingTip: '加载中...', loading: '加载中...',
telEmpty: '请填写电话', telEmpty: '请填写电话',
nameEmpty: '请填写姓名', nameEmpty: '请填写姓名',
confirmDelete: '确定要删除么', confirmDelete: '确定要删除么',

View File

@ -6,7 +6,7 @@ export default {
cancel: '取消', cancel: '取消',
delete: '刪除', delete: '刪除',
complete: '完成', complete: '完成',
loadingTip: '加載中...', loading: '加載中...',
telEmpty: '請填寫電話', telEmpty: '請填寫電話',
nameEmpty: '請填寫姓名', nameEmpty: '請填寫姓名',
confirmDelete: '確定要刪除麽', confirmDelete: '確定要刪除麽',

View File

@ -6,7 +6,7 @@ export default {
cancel: '取消', cancel: '取消',
delete: '刪除', delete: '刪除',
complete: '完成', complete: '完成',
loadingTip: '載入中...', loading: '載入中...',
telEmpty: '請填寫電話', telEmpty: '請填寫電話',
nameEmpty: '請填寫姓名', nameEmpty: '請填寫姓名',
confirmDelete: '確定要刪除嗎', confirmDelete: '確定要刪除嗎',

View File

@ -28,7 +28,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('loading')"> <demo-block :title="$t('loadingStatus')">
<van-picker <van-picker
loading loading
:columns="columns" :columns="columns"

View File

@ -9,35 +9,18 @@
@touchcancel="onTouchEnd" @touchcancel="onTouchEnd"
> >
<div :class="b('head')"> <div :class="b('head')">
<slot <slot :name="status">
v-if="status === 'normal'"
name="normal"
/>
<slot
v-if="status === 'pulling'"
name="pulling"
>
<div <div
v-text="pullingText || $t('pulling')" v-if="status === 'pulling' || status === 'loosing'"
v-text="text"
:class="b('text')" :class="b('text')"
/> />
</slot>
<slot
v-if="status === 'loosing'"
name="loosing"
>
<div <div
v-text="loosingText || $t('loosing')" v-if="status === 'loading'"
:class="b('text')" :class="b('loading')"
/> >
</slot>
<slot
v-if="status === 'loading'"
name="loading"
>
<div :class="b('loading')">
<loading /> <loading />
<span v-text="loadingText || $t('loadingTip')" /> <span v-text="text" />
</div> </div>
</slot> </slot>
</div> </div>
@ -93,11 +76,11 @@ export default create({
untouchable() { untouchable() {
return this.status === 'loading' || this.disabled; return this.status === 'loading' || this.disabled;
} },
},
mounted() { text() {
this.scrollEl = scrollUtils.getScrollEventTarget(this.$el); return this[`${this.status}Text`] || this.$t(this.status);
}
}, },
watch: { watch: {
@ -107,12 +90,13 @@ export default create({
} }
}, },
mounted() {
this.scrollEl = scrollUtils.getScrollEventTarget(this.$el);
},
methods: { methods: {
onTouchStart(event) { onTouchStart(event) {
if (this.untouchable) { if (!this.untouchable && this.getCeiling()) {
return;
}
if (this.getCeiling()) {
this.duration = 0; this.duration = 0;
this.touchStart(event); this.touchStart(event);
} }
@ -140,11 +124,7 @@ export default create({
}, },
onTouchEnd() { onTouchEnd() {
if (this.untouchable) { if (!this.untouchable && this.ceiling && this.deltaY) {
return;
}
if (this.ceiling && this.deltaY) {
this.duration = this.animationDuration; this.duration = this.animationDuration;
if (this.status === 'loosing') { if (this.status === 'loosing') {
this.getStatus(this.headHeight, true); this.getStatus(this.headHeight, true);

View File

@ -7,7 +7,6 @@ exports[`renders demo correctly 1`] = `
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<!----> <!---->
<!----> <!---->
<!---->
</div> </div>
<div> <div>
<p>刷新次数: 0</p> <p>刷新次数: 0</p>

View File

@ -4,10 +4,8 @@ exports[`change head content when pulling down 1`] = `
<div class="van-pull-refresh"> <div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transform: translate3d(0,20px, 0);"> <div class="van-pull-refresh__track" style="transform: translate3d(0,20px, 0);">
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<!---->
<div class="van-pull-refresh__text">下拉即可刷新...</div> <div class="van-pull-refresh__text">下拉即可刷新...</div>
<!----> <!---->
<!---->
</div> </div>
</div> </div>
</div> </div>
@ -17,9 +15,7 @@ exports[`change head content when pulling down 2`] = `
<div class="van-pull-refresh"> <div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transform: translate3d(0,75px, 0);"> <div class="van-pull-refresh__track" style="transform: translate3d(0,75px, 0);">
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<!----> <div class="van-pull-refresh__text">下拉即可刷新...</div>
<!---->
<div class="van-pull-refresh__text">释放即可刷新...</div>
<!----> <!---->
</div> </div>
</div> </div>
@ -30,11 +26,9 @@ exports[`change head content when pulling down 3`] = `
<div class="van-pull-refresh"> <div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transform: translate3d(0,50px, 0);"> <div class="van-pull-refresh__track" style="transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<!---->
<!---->
<!----> <!---->
<div class="van-pull-refresh__loading"> <div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span>加载中...</span> <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span>释放即可刷新...</span>
</div> </div>
</div> </div>
</div> </div>
@ -45,11 +39,9 @@ exports[`change head content when pulling down 4`] = `
<div class="van-pull-refresh"> <div class="van-pull-refresh">
<div class="van-pull-refresh__track" style="transform: translate3d(0,50px, 0);"> <div class="van-pull-refresh__track" style="transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<!---->
<!---->
<!----> <!---->
<div class="van-pull-refresh__loading"> <div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span>加载中...</span> <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span>释放即可刷新...</span>
</div> </div>
</div> </div>
</div> </div>
@ -62,7 +54,6 @@ exports[`change head content when pulling down 5`] = `
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<!----> <!---->
<!----> <!---->
<!---->
</div> </div>
</div> </div>
</div> </div>
@ -74,7 +65,6 @@ exports[`not in page top 1`] = `
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<!----> <!---->
<!----> <!---->
<!---->
</div> </div>
</div> </div>
</div> </div>

View File

@ -18,7 +18,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('loading')"> <demo-block :title="$t('loadingStatus')">
<van-submit-bar <van-submit-bar
loading loading
:price="3050" :price="3050"

View File

@ -19,7 +19,7 @@
</van-cell-group> </van-cell-group>
</demo-block> </demo-block>
<demo-block :title="$t('loading')"> <demo-block :title="$t('loadingStatus')">
<van-cell-group> <van-cell-group>
<van-switch-cell <van-switch-cell
v-model="checked" v-model="checked"

View File

@ -11,7 +11,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('loading')"> <demo-block :title="$t('loadingStatus')">
<van-switch <van-switch
v-model="checked" v-model="checked"
loading loading

View File

@ -24,7 +24,6 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
loading: '加载中',
title1: '文字提示', title1: '文字提示',
title2: '加载提示', title2: '加载提示',
title3: '成功/失败提示', title3: '成功/失败提示',
@ -54,7 +53,7 @@ export default {
methods: { methods: {
showLoadingToast() { showLoadingToast() {
this.$toast.loading({ mask: true, message: this.$t('loading') + '...' }); this.$toast.loading({ mask: true, message: this.$t('loading') });
}, },
showSuccessToast() { showSuccessToast() {