diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md
index 3e2032e33..dff8e8adf 100644
--- a/src/number-keyboard/README.md
+++ b/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
+弹出配置随机数字的键盘
+
+```
+
+```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
diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md
index 9949a7d14..e5215fbe2 100644
--- a/src/number-keyboard/README.zh-CN.md
+++ b/src/number-keyboard/README.zh-CN.md
@@ -122,6 +122,43 @@ export default {
/>
```
+### 随机数字键盘
+
+通过 `random-key-order` 属性可以随机排序数字键盘,常用于安全等级较高的场景
+
+```html
+弹出配置随机数字的键盘
+
+```
+
+```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
diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue
index 9b33eae08..32fb81afc 100644
--- a/src/number-keyboard/demo/index.vue
+++ b/src/number-keyboard/demo/index.vue
@@ -15,6 +15,7 @@
{{ t('button5') }}
+
+
diff --git a/src/number-keyboard/index.js b/src/number-keyboard/index.js
index 5af8c6b98..46c730b03 100644
--- a/src/number-keyboard/index.js
+++ b/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;
},
diff --git a/src/number-keyboard/test/index.spec.js b/src/number-keyboard/test/index.spec.js
index 39990660e..cb2f1020a 100644
--- a/src/number-keyboard/test/index.spec.js
+++ b/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);
+});