feat(number-keyboard): add prop isHideConfirm & slot (didi#475)

* feat(number-keyboard): add prop isHideConfirm & slot

* example(number-keyboard): update cases

* doc(number-keyboard): update readme

* fix(number-keyboard): avoiding border from being touched by mistake

didi#477

components/number-keyboard/README.en-US.md

@@ -25,9 +25,19 @@ Vue.component(NumberKeyboard.name, NumberKeyboard)
 |is-view|inline display in page, otherwise it shows as `Popup`|Boolean|`false`|-|
 |type|keyboard type|String|`professional`|`professional` with confirmation key and decimal point is often used for price or amount input, `simple` is generally used for password or verification code input|
 |disorder|if numeric keys of keyboard are out of order|Boolean|`false`| -|
+|is-hide-confirm|automatically hide the keyboard when confirming|Boolean|`true`| -|
 |text-render|customize value of specified key|Function(value: string): string|-|replaceable key `0,1,...9,.`|
 |ok-text|text of confirmation key|String|`confirm`|-|
 
+#### NumberKeyboard Slots
+
+#### default
+
+```html
+<md-number-keyboard>
+  <md-icon name="security"></md-icon>&nbsp;安全支付
+</md-number-keyboard>
+```
 #### NumberKeyboard Methods
 
 ##### show()

components/number-keyboard/README.md

@@ -25,9 +25,20 @@ Vue.component(NumberKeyboard.name, NumberKeyboard)
 |is-view|是否内嵌在页面内展示，否则以弹层形式|Boolean|`false`|-|
 |type|键盘类型|String|`professional`|`professional`有确认键和小数点常用于价格或金额输入，`simple`一般用于密码或验证码输入|
 |disorder|键盘数字键是否乱序|Boolean|`false`| -|
+|is-hide-confirm|确认时自动隐藏键盘|Boolean|`true`| -|
 |text-render|自定义指定按键的值|Function(value: string): string|-|可替换键`0,1,...9,.`|
 |ok-text|键盘确认键文案|String|`确认`|-|
 
+#### NumberKeyboard Slots
+
+#### default
+
+```html
+<md-number-keyboard>
+  <md-icon name="security"></md-icon>&nbsp;安全支付
+</md-number-keyboard>
+```
+
 #### NumberKeyboard Methods
 
 ##### show()

components/number-keyboard/board.vue

@@ -195,6 +195,8 @@ export default {
           width 66.6%
         &:active, &.active
           background-color number-keyboard-key-bg-tap
+        &:before, &:after
+          pointer-events none
   .keyboard-operate
     flex 1
     .keyboard-operate-list

components/number-keyboard/demo/cases/demo0.vue

@@ -76,6 +76,6 @@ export default {
     left 50%
     z-index 9999
     transform translate(-50%, -50%)
-    font-size font-heading-large * 2
-    text-shadow 0 4px 20px color-text-minor
+    font-size 120px
+    text-shadow 0 4px 20px #666
 </style>

components/number-keyboard/demo/cases/demo1.vue

@@ -52,6 +52,6 @@ export default {
   left 50%
   z-index 9999
   transform translate(-50%, -50%)
-  font-size font-heading-large * 2
-  text-shadow 0 4px 20px color-text-minor
+  font-size 120px
+  text-shadow 0 4px 20px #666
 </style>

components/number-keyboard/demo/cases/demo2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="md-example-child md-example-child-number-keyboard md-example-child-number-keyboard-1">
+  <div class="md-example-child md-example-child-number-keyboard md-example-child-number-keyboard-2">
     <md-button @click="isKeyBoardShow = !isKeyBoardShow">{{ isKeyBoardShow ? '收起键盘' : '唤起键盘' }}</md-button>
     <md-number-keyboard
       v-model="isKeyBoardShow"
@@ -51,6 +51,6 @@ export default {
   left 50%
   z-index 9999
   transform translate(-50%, -50%)
-  font-size font-heading-large * 2
-  text-shadow 0 4px 20px color-text-minor
+  font-size 120px
+  text-shadow 0 4px 20px #666
 </style>

components/number-keyboard/demo/cases/demo3.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="md-example-child md-example-child-number-keyboard md-example-child-number-keyboard-3">
+    <md-button @click="isKeyBoardShow = !isKeyBoardShow">{{ isKeyBoardShow ? '收起键盘' : '唤起键盘' }}</md-button>
+    <md-number-keyboard
+      v-model="isKeyBoardShow"
+      ok-text="支付"
+      disorder
+    >
+      <p class="number-keyboard-header">
+        <md-icon name="security"></md-icon>&nbsp;安全支付
+      </p>
+    </md-number-keyboard>
+  </div>
+</template>
+
+<script>import {NumberKeyboard, Button, Icon} from 'mand-mobile'
+
+export default {
+  name: 'number-keyboard-demo',
+  /* DELETE */
+  title: '插槽',
+  titleEnUS: 'Slots',
+  /* DELETE */
+  components: {
+    [Button.name]: Button,
+    [Icon.name]: Icon,
+    [NumberKeyboard.name]: NumberKeyboard,
+  },
+  data() {
+    return {
+      isKeyBoardShow: false,
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.number-keyboard-header
+  display flex
+  align-items center
+  justify-content center
+  padding 10px 0
+  font-size 14px
+  color #999
+</style>

components/number-keyboard/demo/index.vue

@@ -14,5 +14,6 @@
 import Demo0 from './cases/demo0'
 import Demo1 from './cases/demo1'
 import Demo2 from './cases/demo2'
-export default {...createDemoModule('number-keyboard', [Demo0, Demo1, Demo2])}
+import Demo3 from './cases/demo3'
+export default {...createDemoModule('number-keyboard', [Demo0, Demo1, Demo2, Demo3])}
 </script>

components/number-keyboard/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="md-number-keyboard" :class="{'in-view': isView}">
     <template v-if="isView">
+      <div class="md-number-keyboard-slot" v-if="$slots.default">
+        <slot></slot>
+      </div>
       <md-number-keyboard-container
         ref="keyborad"
         :type="type"
@@ -24,6 +27,9 @@
         @hide="$emit('hide')"
         :has-mask="false"
       >
+        <div class="md-number-keyboard-slot" v-if="$slots.default">
+          <slot></slot>
+        </div>
         <md-number-keyboard-container
           ref="keyborad"
           :type="type"
@@ -73,6 +79,10 @@ export default {
     disorder: {
       type: Boolean,
     },
+    isHideConfirm: {
+      type: Boolean,
+      default: true,
+    },
     okText: {
       type: String,
     },
@@ -110,7 +120,7 @@ export default {
     },
     $_onConfirm() {
       this.$emit('confirm')
-      this.hide()
+      this.isHideConfirm && this.hide()
     },
 
     // MARK: public methods