docs(NumberKeyboard): add random key order demo (#7844)

src/number-keyboard/README.md

@@ -111,43 +111,23 @@ Use `title` prop to set keyboard title.
 />
 ```
 
-### Number Random
+### Random Key Order
 
-Use `random-key-order` prop to random sort number keypads.
+Use `random-key-order` prop to shuffle the order of keys.
 
 ```html
-<van-cell @touchstart.native.stop="show = true"
+<van-cell @touchstart.native.stop="show = true">
-  >弹出配置随机数字的键盘</van-cell
+  Show Keyboard With Random Key Order
->
+</van-cell>
 <van-number-keyboard
   :show="show"
-  :random-key-order="true"
+  random-key-order
   @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
@@ -197,7 +177,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` |
+| random-key-order `v2.12.2` | Whether to shuffle the order of keys | _boolean_ | `false` |
 
 ### Events
 

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

@@ -124,41 +124,21 @@ export default {
 
 ### 随机数字键盘
 
-通过 `random-key-order` 属性可以随机排序数字键盘，常用于安全等级较高的场景
+通过 `random-key-order` 属性可以随机排序数字键盘，常用于安全等级较高的场景。
 
 ```html
-<van-cell @touchstart.native.stop="show = true"
+<van-cell @touchstart.native.stop="show = true">
-  >弹出配置随机数字的键盘</van-cell
+  弹出配置随机数字的键盘
->
+</van-cell>
 <van-number-keyboard
   :show="show"
-  :random-key-order="true"
+  random-key-order
   @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` 绑定键盘当前输入值。
@@ -210,7 +190,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` |
+| random-key-order `v2.12.2` | 是否将通过随机顺序展示按键 | _boolean_ | `false` |
 
 ### Events
 

src/number-keyboard/demo/index.vue

@@ -15,6 +15,9 @@
     <van-cell is-link @touchstart.native.stop="keyboard = 'multiExtraKey'">
       {{ t('button5') }}
     </van-cell>
+    <van-cell is-link @touchstart.native.stop="keyboard = 'randomKeyOrder'">
+      {{ t('button6') }}
+    </van-cell>
 
     <van-field
       readonly
@@ -71,13 +74,21 @@
       @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'"
       maxlength="6"
       @blur="keyboard = ''"
     />
-
   </demo-section>
 </template>
 
@@ -93,10 +104,12 @@ export default {
       button3: '弹出身份证号键盘',
       button4: '弹出带标题的键盘',
       button5: '弹出配置多个按键的键盘',
+      button6: '弹出配置随机数字的键盘',
+      extraKey: '左下角按键内容',
       bindValue: '双向绑定',
       clickToInput: '点此输入',
-      extraKey: '左下角按键内容',
       multiExtraKey: '配置多个按键',
+      randomKeyOrder: '随机数字键盘',
     },
     'en-US': {
       close: 'Close',
@@ -107,10 +120,12 @@ export default {
       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',
     },
   },
 
@@ -118,6 +133,7 @@ export default {
     return {
       value: '',
       keyboard: 'default',
+      isTest: process.env.NODE_ENV === 'test',
     };
   },
 

src/number-keyboard/index.js

@@ -24,6 +24,7 @@ export default createComponent({
     show: Boolean,
     title: String,
     zIndex: [Number, String],
+    randomKeyOrder: Boolean,
     closeButtonText: String,
     deleteButtonText: String,
     closeButtonLoading: Boolean,
@@ -59,10 +60,6 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
-    randomKeyOrder: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   watch: {

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

@@ -32,6 +32,12 @@ exports[`renders demo correctly 1`] = `
     </div><i class="van-icon van-icon-arrow van-cell__right-icon">
       <!----></i>
   </div>
+  <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+    <div class="van-cell__value van-cell__value--alone">
+      弹出配置随机数字的键盘
+    </div><i class="van-icon van-icon-arrow van-cell__right-icon">
+      <!----></i>
+  </div>
   <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
     <div class="van-cell__title van-field__label"><span>双向绑定</span></div>
     <div class="van-cell__value van-field__value">
@@ -277,6 +283,7 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <!---->
   <div class="van-number-keyboard" style="display: none;" name="van-slide-up">
     <div class="van-number-keyboard__body">
       <div class="van-number-keyboard__keys">