[new feature] NumberKeyboard: add hideOnClickOutside & closeButtonText props (#458)

docs/demos/views/number-keyboard.vue

@@ -5,12 +5,10 @@
         {{ $t('button1') }}
       </van-button>
 
-      <van-button @touchstart.native.stop="showKeyboard = false">
-        {{ $t('button2') }}
-      </van-button>
-
       <van-number-keyboard
         :show="showKeyboard"
+        :closeButtonText="$t('close')"
+        extraKey="."
         @blur="showKeyboard = false"
         @input="onInput"
         @delete="onDelete"
@@ -24,11 +22,13 @@ export default {
   i18n: {
     'zh-CN': {
       button1: '弹出键盘',
-      button2: '收起键盘'
+      button2: '收起键盘',
+      close: '完成'
     },
     'en-US': {
       button1: 'Show Keyboard',
-      button2: 'Hide Keyboard'
+      button2: 'Hide Keyboard',
+      close: 'Close'
     }
   },
 

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

@@ -16,12 +16,10 @@ Vue.use(NumberKeyboard);
   Show Keyboard
 </van-button>
 
-<van-button @touchstart.native.stop="showKeyboard = false">
-  Hide Keyboard
-</van-button>
-
 <van-number-keyboard
+  extraKey="."
   :show="showKeyboard"
+  closeButtonText="Close"
   @blur="showKeyboard = false"
   @input="onInput"
   @delete="onDelete"
@@ -53,10 +51,12 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | show | Whether to show keyboard | `Boolean` | - | - |
 | title | Keyboard title | `String` | - | - |
-| extraKey | Content of bottom left key | `String` | `''` | - |
 | zIndex | Keyboard z-index | `Number` | `100` | - |
+| extraKey | Content of bottom left key | `String` | `''` | - |
+| closeButtonText | Close button text | `String` | `-` | - |
 | transition | Whether to show transition animation | `Boolean` | `true` | - |
 | showDeleteKey | Whether to show delete button | `Boolean` | `true` | - |
+| hideOnClickOutside | Whether to hide keyboard when click outside | `Boolean` | `true` | - |
 
 ### Event
 

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

@@ -16,12 +16,10 @@ Vue.use(NumberKeyboard);
   弹出键盘
 </van-button>
 
-<van-button @touchstart.native.stop="showKeyboard = false">
-  收起键盘
-</van-button>
-
 <van-number-keyboard
+  extraKey="."
   :show="showKeyboard"
+  closeButtonText="完成"
   @blur="showKeyboard = false"
   @input="onInput"
   @delete="onDelete"
@@ -53,10 +51,12 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | show | 是否显示键盘 | `Boolean` | - | - |
 | title | 键盘标题 | `String` | - | - |
-| extraKey | 左下角按键内容 | `String` | `''` | - |
 | zIndex | 键盘 z-index | `Number` | `100` | - |
+| extraKey | 左下角按键内容 | `String` | `''` | - |
+| closeButtonText | 关闭按钮文字，空则不展示 | `String` | `-` | - |
 | transition | 是否开启过场动画 | `Boolean` | `true` | - |
 | showDeleteKey | 是否展示删除按钮 | `Boolean` | `true` | - |
+| hideOnClickOutside | 点击外部时是否收起键盘 | `Boolean` | `true` | - |
 
 ### Event
 

packages/number-keyboard/index.vue

@@ -9,12 +9,18 @@
       @touchend="blurKey"
       @touchcancel="blurKey"
       @animationend="onAnimationEnd"
+      @webkitAnimationEnd="onAnimationEnd"
     >
-      <div class="van-number-keyboard__title van-hairline--top" v-if="title">
+      <div class="van-number-keyboard__title van-hairline--top" v-if="title || closeButtonText">
         <span>{{ title }}</span>
+        <span
+          class="van-number-keyboard__close"
+          v-text="closeButtonText"
+          @click="blurKeyboard"
+        />
       </div>
-      <i 
-        v-for="(key, index) in keys" 
+      <i
+        v-for="(key, index) in keys"
         v-text="key"
         :data-key="index"
         class="van-hairline"
@@ -35,6 +41,11 @@ export default create({
 
   props: {
     show: Boolean,
+    closeButtonText: String,
+    theme: {
+      type: String,
+      default: 'default'
+    },
     extraKey: {
       type: String,
       default: ''
@@ -51,6 +62,10 @@ export default create({
     showDeleteKey: {
       type: Boolean,
       default: true
+    },
+    hideOnClickOutside: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -103,7 +118,7 @@ export default create({
 
   methods: {
     handler(action) {
-      if (action !== this.handlerStatus) {
+      if (action !== this.handlerStatus && this.hideOnClickOutside) {
         this.handlerStatus = action;
         document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.blurKeyboard);
       }

packages/vant-css/src/number-keyboard.css

@@ -14,7 +14,21 @@
     text-align: center;
     color: $gray-dark;
     font-size: 12px;
-    line-height: 25px;
+    height: 30px;
+    line-height: 30px;
+    position: relative;
+  }
+
+  &__close {
+    right: 0;
+    color: $blue;
+    font-size: 14px;
+    padding: 0 15px;
+    position: absolute;
+
+    &:active {
+      background-color: $active-color;
+    }
   }
 
   i {