feat: add multiple examples (#5564)

src/number-keyboard/README.md

@@ -90,6 +90,45 @@ export default {
 }
 ```
 
+### Bottom Left Button Content
+
+Use `extra-key` prop to set the content of bottom left button
+
+```html
+<van-button plain type="primary" @touchstart.stop="show = true'">
+  Show Id Card Number Keyboard
+</van-button>
+
+<van-number-keyboard
+  :show="show"
+  close-button-text="Close"
+  extra-key="X"
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
+### Keyboard Title
+
+Use `title` prop to set keyboard title
+
+```html
+<van-button plain type="info" @touchstart.stop="show = true'">
+  Show Custom Title Keyboard
+</van-button>
+
+<van-number-keyboard
+  :show="show"
+  close-button-text="Close"
+  title="Keyboard Title"
+  extra-key="."
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
 ## API
 
 ### Props

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

@@ -96,6 +96,45 @@ export default {
 }
 ```
 
+### 左下角按键内容
+
+通过`extra-key`属性可以设置左下角按键内容
+
+```html
+<van-button plain type="primary" @touchstart.stop="show = true'">
+  弹出身份证号码键盘
+</van-button>
+
+<van-number-keyboard
+  :show="show"
+  close-button-text="完成"
+  extra-key="X"
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
+### 键盘标题
+
+通过`title`属性可以设置键盘标题
+
+```html
+<van-button plain type="info" @touchstart.stop="show = true'">
+  弹出自定义标题键盘
+</van-button>
+
+<van-number-keyboard
+  :show="show"
+  close-button-text="完成"
+  title="键盘标题"
+  extra-key="."
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
 ## API
 
 ### Props

src/number-keyboard/demo/index.vue

@@ -43,6 +43,33 @@
         @blur="keyboard = ''"
       />
     </demo-block>
+
+    <demo-block :title="$t('extraKey')">
+      <van-button plain type="primary" @touchstart.stop="keyboard = 'extraKey'">{{ $t('button3') }}</van-button>
+
+      <van-number-keyboard
+        :show="keyboard === 'extraKey'"
+        :close-button-text="$t('close')"
+        extra-key="X"
+        @blur="keyboard = ''"
+        @input="onInput"
+        @delete="onDelete"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('title')">
+      <van-button plain type="info" @touchstart.stop="keyboard = 'title'">{{ $t('button4') }}</van-button>
+
+      <van-number-keyboard
+        :show="keyboard === 'title'"
+        :close-button-text="$t('close')"
+        :title="$t('title')"
+        extra-key="."
+        @blur="keyboard = ''"
+        @input="onInput"
+        @delete="onDelete"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -54,20 +81,28 @@ export default {
       custom: '自定义样式',
       button1: '弹出默认键盘',
       button2: '弹出自定义键盘',
+      button3: '弹出身份证号码键盘',
+      button4: '弹出自定义标题键盘',
       close: '完成',
       input: '输入',
       bindValue: '双向绑定',
-      clickToInput: '点此输入'
+      clickToInput: '点此输入',
+      extraKey: '左下角按键内容',
+      title: '键盘标题'
     },
     'en-US': {
       default: 'Default style',
       custom: 'Custom style',
       button1: 'Show Default Keyboard',
       button2: 'Show Custom Keyboard',
+      button3: 'Show Id Card Number Keyboard',
+      button4: 'Show Custom Title Keyboard',
       close: 'Close',
       input: 'Input',
       bindValue: 'Bind Value',
-      clickToInput: 'Click To Input'
+      clickToInput: 'Click To Input',
+      extraKey: 'Bottom Left Button Content',
+      title: 'Keyboard Title'
     }
   },
 

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

@@ -25,5 +25,17 @@ exports[`renders demo correctly 1`] = `
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">弹出身份证号码键盘</span></button>
+    <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
+      <div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
+      <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">X</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+    </div>
+  </div>
+  <div><button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">弹出自定义标题键盘</span></button>
+    <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
+      <div class="van-number-keyboard__title van-hairline--top"><span>键盘标题</span><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
+      <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+    </div>
+  </div>
 </div>
 `;