[new feature] NumberKeyboard: add maxlength prop (#3532)

packages/number-keyboard/demo/index.vue

@@ -51,7 +51,7 @@
       <van-number-keyboard
         v-model="value"
         :show="keyboard === 'bindValue'"
-        :close-button-text="$t('close')"
+        maxlength="6"
         safe-area-inset-bottom
         @blur="keyboard = ''"
       />

packages/number-keyboard/en-US.md

@@ -72,6 +72,7 @@ export default {
 <van-number-keyboard
   v-model="value"
   :show="show"
+  :maxlength="6"
   @blur="show = false"
 />
 ```
@@ -97,6 +98,7 @@ export default {
 | show | Whether to show keyboard | `Boolean` | - |
 | theme | Keyboard theme，can be set to `default` `custom` | `String` | `default` |
 | title | Keyboard title | `String` | - |
+| maxlength | Value maxlength | `Number | String` | - |
 | transition | Whether to show transition animation | `Boolean` | `true` |
 | z-index | Keyboard z-index | `Number` | `100` |
 | extra-key | Content of bottom left key | `String` | `''` |

packages/number-keyboard/index.js

@@ -38,6 +38,10 @@ export default sfc({
       type: String,
       default: ''
     },
+    maxlength: {
+      type: [Number, String],
+      default: Number.MAX_VALUE
+    },
     zIndex: {
       type: Number,
       default: 100
@@ -118,7 +122,7 @@ export default sfc({
         this.$emit('update:value', value.slice(0, value.length - 1));
       } else if (type === 'close') {
         this.onClose();
-      } else {
+      } else if (value.length < this.maxlength) {
         this.$emit('input', text);
         this.$emit('update:value', value + text);
       }

packages/number-keyboard/test/__snapshots__/demo.spec.js.snap

@@ -25,7 +25,6 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
     <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
-      <div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>

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

@@ -127,7 +127,7 @@ test('focus on key', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('controlled mode', () => {
+test('bind value', () => {
   const wrapper = mount(NumberKeyboard, {
     propsData: {
       value: ''
@@ -148,3 +148,26 @@ test('controlled mode', () => {
   keys.at(11).trigger('click');
   expect(wrapper.vm.value).toEqual('1');
 });
+
+test('maxlength', () => {
+  const onInput = jest.fn();
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      value: '',
+      maxlength: 1
+    },
+    listeners: {
+      input: onInput,
+      'update:value': value => {
+        wrapper.setProps({ value });
+      }
+    }
+  });
+
+  const keys = wrapper.findAll('.van-key');
+  keys.at(0).trigger('click');
+  keys.at(1).trigger('click');
+
+  expect(wrapper.vm.value).toEqual('1');
+  expect(onInput).toHaveBeenCalledTimes(1);
+});

packages/number-keyboard/zh-CN.md

@@ -75,6 +75,7 @@ export default {
 <van-number-keyboard
   v-model="value"
   :show="show"
+  :maxlength="6"
   @blur="show = false"
 />
 ```
@@ -100,6 +101,7 @@ export default {
 | show | 是否显示键盘 | `Boolean` | - | - |
 | theme | 样式风格，可选值为 `default` `custom` | `String` | `default` | - |
 | title | 键盘标题 | `String` | - | - |
+| maxlength | 输入值最大长度 | `Number | String` | - | 2.0.2 |
 | transition | 是否开启过场动画 | `Boolean` | `true` | - |
 | z-index | 键盘 z-index | `Number` | `100` | - |
 | extra-key | 左下角按键内容 | `String` | `''` | - |