fix(NumberKeyboard): show-delete-key prop not work (#5935)

src/number-keyboard/README.md

@@ -145,7 +145,7 @@ Use `title` prop to set keyboard title
 | extra-key | Content of bottom left key | *string* | `''` |
 | close-button-text | Close button text | *string* | `-` |
 | delete-button-text | Delete button text | *string* | `delete` |
-| show-delete-key | Whether to show delete button | *boolean* | `true` |
+| show-delete-key `v2.6.0` | 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

@@ -151,7 +151,7 @@ export default {
 | extra-key | 左下角按键内容 | *string* | `''` |
 | close-button-text | 关闭按钮文字，空则不展示 | *string* | `-` |
 | delete-button-text | 删除按钮文字 | *string* | `删除` |
-| show-delete-key | 是否展示删除按钮 | *boolean* | `true` |
+| show-delete-key `v2.6.0` | 是否展示删除按钮 | *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/demo/index.vue

@@ -137,6 +137,8 @@ export default {
 @import '../../style/var';
 
 .demo-number-keyboard {
+  padding-bottom: 300px;
+
   .van-button {
     margin-left: @padding-md;
   }

src/number-keyboard/index.js

@@ -81,7 +81,11 @@ export default createComponent({
           keys.push(
             { text: this.extraKey, theme: ['gray'], type: 'extra' },
             { text: 0 },
-            { text: this.deleteText, theme: ['gray'], type: 'delete' }
+            {
+              theme: ['gray'],
+              text: this.showDeleteKey ? this.deleteText : '',
+              type: this.showDeleteKey ? 'delete' : '',
+            }
           );
           break;
         case 'custom':
@@ -179,14 +183,16 @@ export default createComponent({
       if (this.theme === 'custom') {
         return (
           <div class={bem('sidebar')}>
-            <Key
+            {this.showDeleteKey && (
-              text={this.deleteText}
+              <Key
-              type="delete"
+                text={this.deleteText}
-              theme={DELETE_KEY_THEME}
+                type="delete"
-              onPress={this.onPress}
+                theme={DELETE_KEY_THEME}
-            >
+                onPress={this.onPress}
-              {this.slots('delete')}
+              >
-            </Key>
+                {this.slots('delete')}
+              </Key>
+            )}
             <Key
               text={this.closeButtonText}
               type="close"

src/number-keyboard/index.less

@@ -46,6 +46,8 @@
     position: absolute;
     right: 0;
     bottom: 0;
+    display: flex;
+    flex-direction: column;
     width: 25%;
     height: @number-keyboard-key-height * 4;
   }
@@ -82,9 +84,11 @@
   }
 
   &--big {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
     width: 100%;
-    height: @number-keyboard-key-height * 2;
-    line-height: @number-keyboard-key-height * 2;
   }
 
   &--blue,

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

@@ -189,3 +189,25 @@ test('maxlength', () => {
   expect(wrapper.vm.value).toEqual('1');
   expect(onInput).toHaveBeenCalledTimes(1);
 });
+
+test('show-delete-key prop', () => {
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      showDeleteKey: true,
+    },
+  });
+
+  expect(wrapper.contains('.van-key--delete')).toBeTruthy();
+
+  wrapper.setData({ showDeleteKey: false });
+  expect(wrapper.contains('.van-key--delete')).toBeFalsy();
+
+  wrapper.setData({
+    theme: 'custom',
+    showDeleteKey: true,
+  });
+  expect(wrapper.contains('.van-key--delete')).toBeTruthy();
+
+  wrapper.setData({ showDeleteKey: false });
+  expect(wrapper.contains('.van-key--delete')).toBeFalsy();
+});