feat(pull-refresh): 新增 complete 状态文案与插槽 (#2636) (#2639)

jdf2e · Nov 17, 2023 · e5dcce6 · e5dcce6
1 parent 793783f
commit e5dcce6
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 51 deletions.
diff --git a/src/packages/__VUE/pullrefresh/demo.vue b/src/packages/__VUE/pullrefresh/demo.vue
@@ -9,6 +9,7 @@
       <nut-tab-pane :title="translate('customTxt')">
         <nut-pull-refresh
           v-model="refresh2"
+          :complete-duration="1000"
           :loosing-txt="translate('loose')"
           :loading-txt="translate('load')"
           :complete-txt="translate('ok')"

diff --git a/src/packages/__VUE/pullrefresh/doc.en-US.md b/src/packages/__VUE/pullrefresh/doc.en-US.md
@@ -50,13 +50,19 @@ const refreshFun = () => {
 
 ### Custom Tips
 
-The pull-down refresh has four states:`'loading' | 'loosing' | 'pulling' `，respectively corresponding to the attribute `pullingTxt、loosingTxt、loadingTxt` ，Complex styles can be implemented through slots。
+The pull-down refresh has four states:`'loading' | 'loosing' | 'pulling' | 'complete' `，respectively corresponding to the attribute `pullingTxt、loosingTxt、loadingTxt、completeTxt` ，Complex styles can be implemented through slots。
 
 :::demo
 
 ```vue
 <template>
-  <nut-pull-refresh v-model="refresh2" loosing-txt="Relax" loading-txt="Desperate loading..." @refresh="refreshFun">
+  <nut-pull-refresh
+    v-model="refresh2"
+    loosing-txt="Relax"
+    loading-txt="Desperate loading..."
+    :complete-duration="1000"
+    @refresh="refreshFun"
+  >
     <template #pulling-txt>
       <div>Pull</div>
     </template>
@@ -124,29 +130,32 @@ const refreshFun = () => {
 
 ### Props
 
-| Attribute     | Description                              | Type             | Default               |
-| ------------- | ---------------------------------------- | ---------------- | --------------------- |
-| v-model       | Loading status                           | boolean          | `false`               |
-| pull-distance | The distance to trigger the pull refresh | number \| string | `50`                  |
-| head-height   | Height of head                           | number \| string | `50`                  |
-| loading-icon  | Loading icon                             | string           | `loading`             |
-| pulling-txt   | Text to show when pulling                | string           | `Pull to refresh...`  |
-| loosing-txt   | Text to show when loosing                | string           | `Loose to refresh...` |
-| loading-txt   | Text to show when loading                | string           | `Loading...`          |
-| duration      | Pull down animation duration             | number           | `0.3`                 |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | Loading status | boolean | `false` |
+| pull-distance | The distance to trigger the pull refresh | number \| string | `50` |
+| head-height | Height of head | number \| string | `50` |
+| loading-icon | Loading icon | string | `loading` |
+| pulling-txt | Text to show when pulling | string | `Pull to refresh...` |
+| loosing-txt | Text to show when loosing | string | `Loose to refresh...` |
+| loading-txt | Text to show when loading | string | `Loading...` |
+| complete-txt | Text to show when complete | string | `Refresh successfully` |
+| complete-duration | Duration of text display when loading is complete (milliseconds),Load completion copy is not displayed when it is `0` | number | `0` |
+| duration | Pull down animation duration | number | `0.3` |
 
 ### Events
 
-| Event   | Description                            | Arguments                       |
-| ------- | -------------------------------------- | ------------------------------- |
-| change  | Emitted when draging or status changed | {status:string,distance:number} |
-| refresh | Emitted after pulling refresh          | -                               |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| change | Emitted when draging or status changed | {status:string,distance:number} |
+| refresh | Emitted after pulling refresh | - |
 
 ### Slots
 
-| Name    | Description                     |
-| ------- | ------------------------------- |
+| Name | Description |
+| --- | --- |
 | pulling | Content of head when at pulling |
 | loosing | Content of head when at loosing |
 | loading | Content of head when at loading |
-| default | Default slot                    |
+| complete | Content of head when at complete |
+| default | Default slot |
diff --git a/src/packages/__VUE/pullrefresh/doc.md b/src/packages/__VUE/pullrefresh/doc.md
@@ -50,13 +50,19 @@ const refreshFun = () => {
 
 ### 自定义文案
 
-下拉刷新有 4 个状态：`'loading' | 'loosing' | 'pulling' `，分别对应属性 `pullingTxt、loosingTxt、loadingTxt` ，复杂样式可以通过 slot 插槽实现。
+下拉刷新有 4 个状态：`'loading' | 'loosing' | 'pulling' | 'complete'`，分别对应属性 `pullingTxt、loosingTxt、loadingTxt、completeTxt` ，复杂样式可以通过 slot 插槽实现。
 
 :::demo
 
 ```vue
 <template>
-  <nut-pull-refresh v-model="refresh" loosing-txt="松开吧" loading-txt="玩命加载中..." @refresh="refreshFun">
+  <nut-pull-refresh
+    v-model="refresh"
+    loosing-txt="松开吧"
+    loading-txt="玩命加载中..."
+    :complete-duration="1000"
+    @refresh="refreshFun"
+  >
     <template #pulling-txt>
       <div>用力拉</div>
     </template>
@@ -124,29 +130,32 @@ const refreshFun = () => {
 
 ### Props
 
-| 参数          | 说明                                       | 类型             | 默认值      |
-| ------------- | ------------------------------------------ | ---------------- | ----------- |
-| v-model       | 是否触发下拉刷新                           | boolean          | `false`     |
-| pull-distance | 触发下拉刷新的距离                         | number \| string | `50`        |
-| head-height   | 顶部内容高度                               | number \| string | `50`        |
-| loading-icon  | 加载中状态时，`loading` 图标。为空表示去掉 | string           | `loading`   |
-| pulling-txt   | 下拉过程提示文案                           | string           | `下拉刷新`  |
-| loosing-txt   | 释放过程提示文案                           | string           | `释放刷新`  |
-| loading-txt   | 加载过程提示文案                           | string           | `加载中...` |
-| duration      | 下拉动画加载时长                           | number           | `0.3 `      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 是否触发下拉刷新 | boolean | `false` |
+| pull-distance | 触发下拉刷新的距离 | number \| string | `50` |
+| head-height | 顶部内容高度 | number \| string | `50` |
+| loading-icon | 加载中状态时，`loading` 图标。为空表示去掉 | string | `loading` |
+| pulling-txt | 下拉过程提示文案 | string | `下拉刷新` |
+| loosing-txt | 释放过程提示文案 | string | `释放刷新` |
+| loading-txt | 加载过程提示文案 | string | `加载中...` |
+| complete-txt | 加载完成提示文案 | string | `刷新成功` |
+| complete-duration | 加载完成时显示文字的持续时间(毫秒),为`0`时不展示加载完成文案 | number | `0` |
+| duration | 下拉动画加载时长 | number | `0.3 ` |
 
 ### Events
 
-| 事件名  | 说明                     | 回调参数                        |
-| ------- | ------------------------ | ------------------------------- |
-| change  | 下拉过程或状态改变时触发 | {status:string,distance:number} |
-| refresh | 下拉刷新事件回调         | -                               |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 下拉过程或状态改变时触发 | {status:string,distance:number} |
+| refresh | 下拉刷新事件回调 | - |
 
 ### Slots
 
-| 名称    | 说明               |
-| ------- | ------------------ |
+| 名称 | 说明 |
+| --- | --- |
 | pulling | 下拉过程的顶部内容 |
 | loosing | 释放过程中顶部内容 |
 | loading | 加载过程中顶部内容 |
-| default | 自定义内容         |
+| complete | 完成时头部的内容 |
+| default | 自定义内容 |
diff --git a/src/packages/__VUE/pullrefresh/index.vue b/src/packages/__VUE/pullrefresh/index.vue
@@ -12,7 +12,7 @@
         <slot v-if="status == 'pulling'" name="pulling"></slot>
         <slot v-if="status == 'loosing'" name="loosing"></slot>
         <slot v-if="status == 'loading'" name="loading"></slot>
-        <!-- <slot v-if="status == 'complete'" name="complete"></slot> -->
+        <slot v-if="status == 'complete'" name="complete"></slot>
       </div>
       <slot></slot>
     </div>
@@ -53,10 +53,10 @@ export default create({
       default: ''
     },
 
-    // completeTxt: {
-    //   type: String,
-    //   default: ''
-    // },
+    completeTxt: {
+      type: String,
+      default: ''
+    },
     headHeight: {
       type: [String, Number],
       default: 50
@@ -70,6 +70,10 @@ export default create({
     duration: {
       type: [String, Number],
       default: 0.3
+    },
+    completeDuration: {
+      type: Number,
+      default: 0
     }
   },
   emits: ['change', 'refresh', 'update:modelValue'],
@@ -99,8 +103,8 @@ export default create({
           return !slots.loosing ? props.loosingTxt || translate('loosing') : '';
         case 'loading':
           return !slots.loading ? props.loadingTxt || translate('loading') : '';
-        // case 'complete':
-        //   return !slots.complete ? props.completeTxt : '';
+        case 'complete':
+          return !slots.complete ? props.completeTxt || translate('complete') : '';
         default:
           break;
       }
@@ -134,12 +138,14 @@ export default create({
       return Math.round(moveDistance);
     };
 
-    const setPullStatus = (distance: number, isLoading?: boolean) => {
+    const setPullStatus = (distance: number, isLoading?: boolean, isComplete?: boolean) => {
       const pullDistance = +(props.pullDistance || props.headHeight);
       state.distance = distance;
 
       if (isLoading) {
         state.status = 'loading';
+      } else if (isComplete) {
+        state.status = 'complete';
       } else if (distance === 0) {
         state.status = 'normal';
       } else if (distance < pullDistance) {
@@ -208,7 +214,11 @@ export default create({
         if (val) {
           setPullStatus(+props.headHeight, true);
         } else {
-          setPullStatus(0);
+          if (props.completeDuration === 0) setPullStatus(0);
+          setPullStatus(+props.headHeight, false, true);
+          setTimeout(() => {
+            setPullStatus(0);
+          }, props.completeDuration);
         }
       }
     );

diff --git a/src/packages/locale/lang/baseLang.ts b/src/packages/locale/lang/baseLang.ts
@@ -88,6 +88,7 @@ export abstract class BaseLang {
     pulling: string;
     loosing: string;
     loading: string;
+    complete: string;
   };
 }
 export default BaseLang;
diff --git a/src/packages/locale/lang/en-US.ts b/src/packages/locale/lang/en-US.ts
@@ -104,7 +104,8 @@ class Lang extends BaseLang {
   pullrefresh = {
     pulling: 'Pull to refresh...',
     loosing: 'Loose to refresh...',
-    loading: 'Loading...'
+    loading: 'Loading...',
+    complete: 'Refresh successfully'
   };
 }
 export default Lang;
diff --git a/src/packages/locale/lang/id-ID.ts b/src/packages/locale/lang/id-ID.ts
@@ -103,7 +103,8 @@ class Lang extends BaseLang {
   pullrefresh = {
     pulling: 'Tarik ke bawah untuk menyegarkan',
     loosing: 'Lepaskan Refresh',
-    loading: 'Memuat...'
+    loading: 'Memuat...',
+    complete: 'Refresh berhasil'
   };
 }
 export default Lang;
diff --git a/src/packages/locale/lang/zh-CN.ts b/src/packages/locale/lang/zh-CN.ts
@@ -103,7 +103,8 @@ class Lang extends BaseLang {
   pullrefresh = {
     pulling: '下拉刷新',
     loosing: '释放刷新',
-    loading: '加载中...'
+    loading: '加载中...',
+    complete: '刷新成功'
   };
 }
 export default Lang;
diff --git a/src/packages/locale/lang/zh-TW.ts b/src/packages/locale/lang/zh-TW.ts
@@ -103,7 +103,8 @@ class Lang extends BaseLang {
   pullrefresh = {
     pulling: '下拉刷新',
     loosing: '釋放刷新',
-    loading: '加載中...'
+    loading: '加載中...',
+    complete: '刷新成功'
   };
 }
 export default Lang;