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

docs/src/demo-common.js

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

packages/button/demo/index.vue

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

packages/list/index.vue

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

packages/list/test/__snapshots__/demo.spec.js.snap

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

packages/locale/lang/en-US.js

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

packages/locale/lang/tr-TR.js

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

packages/locale/lang/zh-CN.js

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

packages/locale/lang/zh-HK.js

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

packages/locale/lang/zh-TW.js

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

packages/picker/demo/index.vue

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

packages/pull-refresh/index.vue

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

packages/pull-refresh/test/__snapshots__/demo.spec.js.snap

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

packages/pull-refresh/test/__snapshots__/index.spec.js.snap

@@ -4,10 +4,8 @@ exports[`change head content when pulling down 1`] = `
 <div class="van-pull-refresh">
   <div class="van-pull-refresh__track" style="transform: translate3d(0,20px, 0);">
     <div class="van-pull-refresh__head">
-      <!---->
       <div class="van-pull-refresh__text">下拉即可刷新...</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__track" style="transform: translate3d(0,75px, 0);">
     <div class="van-pull-refresh__head">
-      <!---->
+      <div class="van-pull-refresh__text">下拉即可刷新...</div>
-      <!---->
-      <div class="van-pull-refresh__text">释放即可刷新...</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__track" style="transform: translate3d(0,50px, 0);">
     <div class="van-pull-refresh__head">
-      <!---->
-      <!---->
       <!---->
       <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>
@@ -45,11 +39,9 @@ exports[`change head content when pulling down 4`] = `
 <div class="van-pull-refresh">
   <div class="van-pull-refresh__track" style="transform: translate3d(0,50px, 0);">
     <div class="van-pull-refresh__head">
-      <!---->
-      <!---->
       <!---->
       <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>
@@ -62,7 +54,6 @@ exports[`change head content when pulling down 5`] = `
     <div class="van-pull-refresh__head">
       <!---->
       <!---->
-      <!---->
     </div>
   </div>
 </div>
@@ -74,7 +65,6 @@ exports[`not in page top 1`] = `
     <div class="van-pull-refresh__head">
       <!---->
       <!---->
-      <!---->
     </div>
   </div>
 </div>

packages/submit-bar/demo/index.vue

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

packages/switch-cell/demo/index.vue

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

packages/switch/demo/index.vue

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

packages/toast/demo/index.vue

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