feat(NumberKeyboard): add close-button-loading prop (#6158)

src/number-keyboard/Key.js

@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils';
 import { TouchMixin } from '../mixins/touch';
+import Loading from '../loading';
 import DeleteIcon from './DeleteIcon';
 import CollapseIcon from './CollapseIcon';
 
@@ -14,6 +15,7 @@ export default createComponent({
     color: String,
     wider: Boolean,
     large: Boolean,
+    loading: Boolean,
   },
 
   data() {
@@ -55,6 +57,10 @@ export default createComponent({
       const isDelete = this.type === 'delete';
       const text = this.slots('default') || this.text;
 
+      if (this.loading) {
+        return <Loading class={bem('loading-icon')} />;
+      }
+
       if (isDelete) {
         return text || <DeleteIcon class={bem('delete-icon')} />;
       }

src/number-keyboard/README.md

@@ -133,14 +133,15 @@ export default {
 | --- | --- | --- | --- |
 | v-model (value) `v2.0.2` | Current value | _string_ | - |
 | show | Whether to show keyboard | _boolean_ | - |
-| theme | Keyboard theme，can be set to `custom` | _string_ | `default` |
 | title | Keyboard title | _string_ | - |
+| theme | Keyboard theme，can be set to `custom` | _string_ | `default` |
 | maxlength `v2.0.2` | Value maxlength | _number \| string_ | - |
 | transition | Whether to show transition animation | _boolean_ | `true` |
 | z-index | Keyboard z-index | _number \| string_ | `100` |
 | extra-key | Content of bottom left key | _string_ | `''` |
 | close-button-text | Close button text | _string_ | - |
 | delete-button-text | Delete button text | _string_ | Delete Icon |
+| close-button-loading `v2.6.4` | Whether to show loading close button in custom theme | _boolean_ | `false` |
 | show-delete-key `v2.5.9` | Whether to show delete button | _boolean_ | `true` |
 | hide-on-click-outside | Whether to hide keyboard when click outside | _boolean_ | `true` |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |

src/number-keyboard/README.zh-CN.md

@@ -144,14 +144,15 @@ export default {
 | --- | --- | --- | --- |
 | v-model (value) `v2.0.2` | 当前输入值 | _string_ | - |
 | show | 是否显示键盘 | _boolean_ | - |
-| theme | 样式风格，可选值为 `custom` | _string_ | `default` |
 | title | 键盘标题 | _string_ | - |
+| theme | 样式风格，可选值为 `custom` | _string_ | `default` |
 | maxlength `v2.0.2` | 输入值最大长度 | _number \| string_ | - |
 | transition | 是否开启过场动画 | _boolean_ | `true` |
-| z-index | 键盘 z-index | _number \| string_ | `100` |
+| z-index | 键盘 z-index 层级 | _number \| string_ | `100` |
 | extra-key | 左下角按键内容 | _string_ | `''` |
 | close-button-text | 关闭按钮文字，空则不展示 | _string_ | - |
 | delete-button-text | 删除按钮文字，空则展示删除图标 | _string_ | - |
+| close-button-loading `v2.6.4` | 是否将关闭按钮设置为加载中状态，仅在 `theme="custom"` 时有效 | _boolean_ | `false` |
 | show-delete-key `v2.5.9` | 是否展示删除图标 | _boolean_ | `true` |
 | hide-on-click-outside | 点击外部时是否收起键盘 | _boolean_ | `true` |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |

src/number-keyboard/index.js

@@ -24,6 +24,7 @@ export default createComponent({
     zIndex: [Number, String],
     closeButtonText: String,
     deleteButtonText: String,
+    closeButtonLoading: Boolean,
     theme: {
       type: String,
       default: 'default',
@@ -189,6 +190,7 @@ export default createComponent({
               text={this.closeButtonText}
               type="close"
               color="blue"
+              loading={this.closeButtonLoading}
               onPress={this.onPress}
             />
           </div>

src/number-keyboard/index.less

@@ -129,4 +129,8 @@
     width: 30px;
     height: 24px;
   }
+
+  &__loading-icon {
+    color: @number-keyboard-button-text-color;
+  }
 }

src/number-keyboard/test/index.spec.js

@@ -1,5 +1,5 @@
 import NumberKeyboard from '..';
-import { mount, trigger } from '../../../test';
+import { mount, trigger, later } from '../../../test';
 
 function clickKey(key) {
   trigger(key, 'touchstart');
@@ -216,3 +216,15 @@ test('show-delete-key prop', () => {
   wrapper.setData({ showDeleteKey: false });
   expect(wrapper.contains('.van-key--delete')).toBeFalsy();
 });
+
+test('close-button-loading prop', () => {
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      show: true,
+      theme: 'custom',
+      closeButtonLoading: true,
+    },
+  });
+
+  expect(wrapper.contains('.van-key__loading-icon')).toBeTruthy();
+});