[new feature] NumberKeyboard add custom theme (#472)

docs/demos/views/number-keyboard.vue

@@ -1,15 +1,31 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <van-button @touchstart.native.stop="showKeyboard = true">
+    <demo-block :title="$t('default')">
+      <van-button @touchstart.native.stop="keyboard = 'default'">
         {{ $t('button1') }}
       </van-button>
 
       <van-number-keyboard
-        :show="showKeyboard"
+        :show="keyboard === 'default'"
         :closeButtonText="$t('close')"
         extraKey="."
-        @blur="showKeyboard = false"
+        @blur="keyboard = ''"
+        @input="onInput"
+        @delete="onDelete"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('custom')">
+      <van-button @touchstart.native.stop="keyboard = 'custom'">
+        {{ $t('button2') }}
+      </van-button>
+
+      <van-number-keyboard
+        :show="keyboard === 'custom'"
+        :closeButtonText="$t('close')"
+        theme="custom"
+        extraKey="."
+        @blur="keyboard = ''"
         @input="onInput"
         @delete="onDelete"
       />
@@ -21,20 +37,24 @@
 export default {
   i18n: {
     'zh-CN': {
-      button1: '弹出键盘',
-      button2: '收起键盘',
+      default: '默认样式',
+      custom: '自定义样式',
+      button1: '弹出默认键盘',
+      button2: '弹出自定义键盘',
       close: '完成'
     },
     'en-US': {
-      button1: 'Show Keyboard',
-      button2: 'Hide Keyboard',
+      default: 'Default style',
+      custom: 'Custom style',
+      button1: 'Show Default Keyboard',
+      button2: 'Show Custom Keyboard',
       close: 'Close'
     }
   },
 
   data() {
     return {
-      showKeyboard: true
+      keyboard: 'default'
     };
   },
 
@@ -46,10 +66,9 @@ export default {
       Toast('Delete');
     }
   }
-}
+};
 </script>
 
-
 <style lang="postcss">
 .demo-number-keyboard {
   .van-button {

docs/markdown/en-US/number-keyboard.md

@@ -9,7 +9,7 @@ Vue.use(NumberKeyboard);
 
 ### Usage
 
-#### Basic Usage
+#### Default Style
 
 ```html
 <van-button @touchstart.native.stop="showKeyboard = true">
@@ -45,11 +45,26 @@ export default {
 }
 ```
 
+#### Custom Style
+
+```html
+<van-number-keyboard
+  theme="custom"
+  extraKey="."
+  :show="showKeyboard"
+  closeButtonText="Close"
+  @blur="showKeyboard = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
 ### API
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | show | Whether to show keyboard | `Boolean` | - | - |
+| theme | Keyboard theme | `String` | `Default` | `Custom` |
 | title | Keyboard title | `String` | - | - |
 | zIndex | Keyboard z-index | `Number` | `100` | - |
 | extraKey | Content of bottom left key | `String` | `''` | - |

docs/markdown/zh-CN/number-keyboard.md

@@ -9,11 +9,11 @@ Vue.use(NumberKeyboard);
 
 ### 代码演示
 
-#### 基础用法
+#### 默认样式
 
 ```html
 <van-button @touchstart.native.stop="showKeyboard = true">
-  弹出键盘
+  弹出默认键盘
 </van-button>
 
 <van-number-keyboard
@@ -45,11 +45,26 @@ export default {
 }
 ```
 
+#### 自定义样式
+
+```html
+<van-number-keyboard
+  theme="custom"
+  extraKey="."
+  :show="showKeyboard"
+  closeButtonText="完成"
+  @blur="showKeyboard = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | show | 是否显示键盘 | `Boolean` | - | - |
+| theme | 键盘样式风格 | `String` | `Default` | `Custom` |
 | title | 键盘标题 | `String` | - | - |
 | zIndex | 键盘 z-index | `Number` | `100` | - |
 | extraKey | 左下角按键内容 | `String` | `''` | - |