Merge branch '2.x' into dev

src/number-keyboard/README.md

@@ -115,6 +115,23 @@ Use `title` prop to set keyboard title.
 />
 ```
 
+### Random Key Order
+
+Use `random-key-order` prop to shuffle the order of keys.
+
+```html
+<van-cell @touchstart.stop="show = true">
+  Show Keyboard With Random Key Order
+</van-cell>
+<van-number-keyboard
+  :show="show"
+  random-key-order
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
 ### Bind Value
 
 ```html
@@ -163,6 +180,7 @@ export default {
 | hide-on-click-outside | Whether to hide keyboard when outside is clicked | _boolean_ | `true` |
 | teleport `v2.10.0` | Return the mount node for NumberKeyboard | _string \| Element_ | - |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
+| random-key-order `v2.12.2` | Whether to shuffle the order of keys | _boolean_ | `false` |
 
 ### Events
 

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

@@ -126,6 +126,23 @@ export default {
 />
 ```
 
+### 随机数字键盘
+
+通过 `random-key-order` 属性可以随机排序数字键盘，常用于安全等级较高的场景。
+
+```html
+<van-cell @touchstart.stop="show = true">
+  弹出配置随机数字的键盘
+</van-cell>
+<van-number-keyboard
+  :show="show"
+  random-key-order
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
 ### 双向绑定
 
 可以通过 `v-model` 绑定键盘当前输入值。
@@ -176,6 +193,7 @@ export default {
 | hide-on-click-outside | 点击外部时是否收起键盘 | _boolean_ | `true` |
 | teleport `v2.10.0` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
+| random-key-order `v2.12.2` | 是否将通过随机顺序展示按键 | _boolean_ | `false` |
 
 ### Events
 

src/number-keyboard/demo/index.vue

@@ -14,6 +14,9 @@
   <van-cell is-link @touchstart.stop="keyboard = 'multiExtraKey'">
     {{ t('button5') }}
   </van-cell>
+  <van-cell is-link @touchstart.stop="keyboard = 'randomKeyOrder'">
+    {{ t('button6') }}
+  </van-cell>
   <van-field
     v-model="value"
     readonly
@@ -69,6 +72,15 @@
     @delete="onDelete"
   />
 
+  <van-number-keyboard
+    v-if="!isTest"
+    :show="keyboard === 'randomKeyOrder'"
+    random-key-order
+    @blur="keyboard = ''"
+    @input="onInput"
+    @delete="onDelete"
+  />
+
   <van-number-keyboard
     v-model="value"
     :show="keyboard === 'bindValue'"
@@ -92,10 +104,12 @@ const i18n = {
     button3: '弹出身份证号键盘',
     button4: '弹出带标题的键盘',
     button5: '弹出配置多个按键的键盘',
+    button6: '弹出配置随机数字的键盘',
     bindValue: '双向绑定',
     clickToInput: '点此输入',
     extraKey: '左下角按键内容',
     multiExtraKey: '配置多个按键',
+    randomKeyOrder: '随机数字键盘',
   },
   'en-US': {
     close: 'Close',
@@ -106,10 +120,12 @@ const i18n = {
     button3: 'Show IdNumber Keyboard',
     button4: 'Show Keyboard With Title',
     button5: 'Show Keyboard With Multiple ExtraKey',
+    button6: 'Show Keyboard With Random Key Order',
     bindValue: 'Bind Value',
     clickToInput: 'Click To Input',
     extraKey: 'IdNumber Keyboard',
     multiExtraKey: 'Multiple ExtraKey',
+    randomKeyOrder: 'Random Key Order',
   },
 };
 
@@ -132,6 +148,7 @@ export default {
     return {
       ...toRefs(state),
       t,
+      isTest: process.env.NODE_ENV === 'test',
       onInput,
       onDelete,
     };

src/number-keyboard/index.js

@@ -11,6 +11,7 @@ export default createComponent({
     title: String,
     zIndex: [Number, String],
     teleport: [String, Object],
+    randomKeyOrder: Boolean,
     closeButtonText: String,
     deleteButtonText: String,
     closeButtonLoading: Boolean,
@@ -66,6 +67,11 @@ export default createComponent({
       for (let i = 1; i <= 9; i++) {
         keys.push({ text: i });
       }
+
+      if (props.randomKeyOrder) {
+        keys.sort(() => (Math.random() > 0.5 ? 1 : -1));
+      }
+
       return keys;
     };
 

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

@@ -51,6 +51,16 @@ exports[`should render demo and match snapshot 1`] = `
   <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
   </i>
 </div>
+<div class="van-cell van-cell--clickable"
+     role="button"
+     tabindex="0"
+>
+  <div class="van-cell__value van-cell__value--alone">
+    Show Keyboard With Random Key Order
+  </div>
+  <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+  </i>
+</div>
 <div class="van-cell van-cell--clickable van-field"
      role="button"
      tabindex="0"

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

@@ -238,3 +238,22 @@ test('close-button-loading prop', () => {
 
   expect(wrapper.contains('.van-key__loading-icon')).toBeTruthy();
 });
+test('random-key-order prop', () => {
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      show: true,
+      randomKeyOrder: true,
+    },
+  });
+
+  const keys = [];
+  const clickKeys = [];
+  for (let i = 0; i < 9; i++) {
+    keys.push(i + 1);
+
+    clickKey(wrapper.findAll('.van-key').at(i));
+    clickKeys.push(wrapper.emitted('input')[i][0]);
+  }
+
+  expect(keys.every((v, k) => keys[k] === clickKeys[k])).toEqual(false);
+});

yarn.lock

@@ -3011,9 +3011,9 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
 camelcase@^6.0.0:
-  version "6.2.0"
-  resolved "https://registry.npm.taobao.org/camelcase/download/camelcase-6.2.0.tgz?cache=0&sync_timestamp=1603921779318&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcamelcase%2Fdownload%2Fcamelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
-  integrity sha1-kkr4gcnVJaydh/QNlk5c6pgqGAk=
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
+  integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
 
 caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001157:
   version "1.0.30001159"