feat(NumberKeyboard): add number random prop (#7841)

src/number-keyboard/README.md

@@ -111,6 +111,43 @@ Use `title` prop to set keyboard title.
 />
 ```
 
+### Number Random
+
+Use `random-key-order` prop to random sort number keypads.
+
+```html
+<van-cell @touchstart.native.stop="show = true"
+  >弹出配置随机数字的键盘</van-cell
+>
+<van-number-keyboard
+  :show="show"
+  :random-key-order="true"
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  data() {
+    return {
+      show: true,
+    };
+  },
+  methods: {
+    onInput(value) {
+      Toast(value);
+    },
+    onDelete() {
+      Toast('删除');
+    },
+  },
+};
+```
+
 ### Bind Value
 
 ```html
@@ -160,6 +197,7 @@ export default {
 | hide-on-click-outside | Whether to hide keyboard when outside is clicked | _boolean_ | `true` |
 | get-container `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 | whether to enable random sort number keypads | _boolean_ | `false` |
 
 ### Events
 

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

@@ -122,6 +122,43 @@ export default {
 />
 ```
 
+### 随机数字键盘
+
+通过 `random-key-order` 属性可以随机排序数字键盘，常用于安全等级较高的场景
+
+```html
+<van-cell @touchstart.native.stop="show = true"
+  >弹出配置随机数字的键盘</van-cell
+>
+<van-number-keyboard
+  :show="show"
+  :random-key-order="true"
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  data() {
+    return {
+      show: true,
+    };
+  },
+  methods: {
+    onInput(value) {
+      Toast(value);
+    },
+    onDelete() {
+      Toast('删除');
+    },
+  },
+};
+```
+
 ### 双向绑定
 
 可以通过 `v-model` 绑定键盘当前输入值。
@@ -173,6 +210,7 @@ export default {
 | hide-on-click-outside | 点击外部时是否收起键盘 | _boolean_ | `true` |
 | get-container `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 | 是否随机键盘数字 | _boolean_ | `false` |
 
 ### Events
 

src/number-keyboard/demo/index.vue

@@ -15,6 +15,7 @@
     <van-cell is-link @touchstart.native.stop="keyboard = 'multiExtraKey'">
       {{ t('button5') }}
     </van-cell>
+
     <van-field
       readonly
       clickable
@@ -76,6 +77,7 @@
       maxlength="6"
       @blur="keyboard = ''"
     />
+
   </demo-section>
 </template>
 

src/number-keyboard/index.js

@@ -59,6 +59,10 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
+    randomKeyOrder: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   watch: {
@@ -84,6 +88,11 @@ export default createComponent({
       for (let i = 1; i <= 9; i++) {
         keys.push({ text: i });
       }
+
+      if (this.randomKeyOrder) {
+        keys.sort(() => (Math.random() > 0.5 ? 1 : -1));
+      }
+
       return keys;
     },
 

src/number-keyboard/test/index.spec.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);
+});