docs(PullRefresh): add custom tip demo

src/pull-refresh/demo/index.vue

@@ -16,6 +16,31 @@
           <p>{{ tips }}</p>
         </van-pull-refresh>
       </van-tab>
+
+      <van-tab :title="$t('customTips')">
+        <van-pull-refresh
+          v-model="isLoading"
+          :head-height="80"
+          @refresh="onRefresh(true)"
+        >
+          <template #pulling="{ distance }">
+            <img
+              class="doge"
+              src="https://b.yzcdn.cn/vant/doge.png"
+              :style="{
+                transform: `scale(${distance / 80})`
+              }"
+            >
+          </template>
+          <template #loosing>
+            <img src="https://b.yzcdn.cn/vant/doge.png" class="doge">
+          </template>
+          <template #loading>
+            <img src="https://b.yzcdn.cn/vant/doge-fire.jpg" class="doge">
+          </template>
+          <p>{{ tips }}</p>
+        </van-pull-refresh>
+      </van-tab>
     </van-tabs>
   </demo-section>
 </template>
@@ -24,16 +49,18 @@
 export default {
   i18n: {
     'zh-CN': {
+      try: '下拉试试',
       text: '刷新次数',
       success: '刷新成功',
-      successTip: '刷新成功提示',
-      try: '下拉试试'
+      successTip: '成功提示',
+      customTips: '自定义提示'
     },
     'en-US': {
+      try: 'Try it down',
       text: 'Refresh Count',
       success: 'Refresh success',
       successTip: 'Success Tip',
-      try: 'Try it down'
+      customTips: 'Custom Tips'
     }
   },
 
@@ -54,7 +81,20 @@ export default {
     }
   },
 
+  mounted() {
+    this.preloadImage();
+  },
+
   methods: {
+    preloadImage() {
+      // preload doge image
+      const doge = new Image();
+      const dogeFire = new Image();
+
+      doge.src = 'https://b.yzcdn.cn/vant/doge.png';
+      dogeFire.src = 'https://b.yzcdn.cn/vant/doge-fire.jpg';
+    },
+
     onRefresh(showToast) {
       setTimeout(() => {
         if (showToast) {
@@ -63,7 +103,7 @@ export default {
 
         this.isLoading = false;
         this.count++;
-      }, 500);
+      }, 1000);
     }
   }
 };
@@ -82,6 +122,13 @@ export default {
     }
   }
 
+  .doge {
+    width: 140px;
+    height: 72px;
+    margin-top: 8px;
+    border-radius: 4px;
+  }
+
   p {
     margin: 0;
     padding: @padding-md 0 0 @padding-md;