From 3e9863d63af484a04bafacc6153061685f9bf7fe Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 28 Apr 2020 11:51:13 +0800 Subject: [PATCH] feat(NumberKeyboard): add close-button-loading prop (#6158) --- src/number-keyboard/Key.js | 6 ++++++ src/number-keyboard/README.md | 3 ++- src/number-keyboard/README.zh-CN.md | 5 +++-- src/number-keyboard/index.js | 2 ++ src/number-keyboard/index.less | 4 ++++ src/number-keyboard/test/index.spec.js | 14 +++++++++++++- 6 files changed, 30 insertions(+), 4 deletions(-) diff --git a/src/number-keyboard/Key.js b/src/number-keyboard/Key.js index 513dd62d6..ee4d0b8e9 100644 --- a/src/number-keyboard/Key.js +++ b/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 ; + } + if (isDelete) { return text || ; } diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index a0fd795c6..80260f253 100644 --- a/src/number-keyboard/README.md +++ b/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` | diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index 7579cbe19..cd3c3cf40 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/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` | diff --git a/src/number-keyboard/index.js b/src/number-keyboard/index.js index d5baf896d..a7c701e28 100644 --- a/src/number-keyboard/index.js +++ b/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} /> diff --git a/src/number-keyboard/index.less b/src/number-keyboard/index.less index 5b330ee5c..66fa111f2 100644 --- a/src/number-keyboard/index.less +++ b/src/number-keyboard/index.less @@ -129,4 +129,8 @@ width: 30px; height: 24px; } + + &__loading-icon { + color: @number-keyboard-button-text-color; + } } diff --git a/src/number-keyboard/test/index.spec.js b/src/number-keyboard/test/index.spec.js index b9eb9bf77..0cae40968 100644 --- a/src/number-keyboard/test/index.spec.js +++ b/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(); +});