diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index 7beb31ebb..7c61febf8 100644 --- a/src/number-keyboard/README.md +++ b/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 + + Show Keyboard With Random Key Order + + +``` + ### 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 diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index 16b82b29c..60f42c56a 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -126,6 +126,23 @@ export default { /> ``` +### 随机数字键盘 + +通过 `random-key-order` 属性可以随机排序数字键盘,常用于安全等级较高的场景。 + +```html + + 弹出配置随机数字的键盘 + + +``` + ### 双向绑定 可以通过 `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 diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue index 799931b41..3a093342f 100644 --- a/src/number-keyboard/demo/index.vue +++ b/src/number-keyboard/demo/index.vue @@ -14,6 +14,9 @@ {{ t('button5') }} + + {{ t('button6') }} + + + (Math.random() > 0.5 ? 1 : -1)); + } + return keys; }; diff --git a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap index d4614fa5b..48a566c4f 100644 --- a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap +++ b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap @@ -51,6 +51,16 @@ exports[`should render demo and match snapshot 1`] = ` +
+
+ Show Keyboard With Random Key Order +
+ + +
{ 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); +}); diff --git a/yarn.lock b/yarn.lock index 3a92cfab4..e8b37dc75 100644 --- a/yarn.lock +++ b/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"