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

packages/number-keyboard/Key.vue

@@ -0,0 +1,49 @@
+<template>
+  <i
+    v-text="text"
+    @touchstart.stop.prevent="onFocus"
+    @touchmove="onBlur"
+    @touchend="onBlur"
+    @touchcancel="onBlur"
+    class="van-hairline van-key"
+    :class="className"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    text: [String, Number],
+    type: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  data() {
+    return {
+      active: false
+    };
+  },
+
+  computed: {
+    className() {
+      const types = this.type.slice(0);
+      this.active && types.push('active');
+
+      return types.map(type => `van-key--${type}`);
+    }
+  },
+
+  methods: {
+    onFocus() {
+      this.active = true;
+      this.$emit('press', this.text);
+    },
+
+    onBlur() {
+      this.active = false;
+    }
+  }
+};
+</script>

packages/number-keyboard/index.vue

@@ -4,43 +4,48 @@
       v-show="show"
       :style="style"
       class="van-number-keyboard"
-      @touchstart.stop.prevent="focus"
-      @touchmove="blurKey"
-      @touchend="blurKey"
-      @touchcancel="blurKey"
+      :class="`van-number-keyboard--${theme}`"
       @animationend="onAnimationEnd"
       @webkitAnimationEnd="onAnimationEnd"
     >
-      <div class="van-number-keyboard__title van-hairline--top" v-if="title || closeButtonText">
-        <span>{{ title }}</span>
+      <div class="van-number-keyboard__title van-hairline--top" v-if="title || showTitleClose">
+        <span v-text="title" />
         <span
           class="van-number-keyboard__close"
+          v-if="showTitleClose"
           v-text="closeButtonText"
-          @click="blurKeyboard"
+          @click="onBlur"
         />
       </div>
-      <i
-        v-for="(key, index) in keys"
-        v-text="key"
-        :data-key="index"
-        class="van-hairline"
-        :class="{
-          'van-number-keyboard--active': index === active,
-          'van-number-keyboard__delete': index === 11 && showDeleteKey
-        }"
-      />
+      <div class="van-number-keyboard__body">
+        <key
+          v-for="(key, index) in keys"
+          :key="index"
+          :text="key.text"
+          :type="key.type"
+          @press="onPressKey"
+        />
+      </div>
+      <div class="van-number-keyboard__sidebar" v-if="theme === 'custom'">
+        <key :text="'delete'" :type="['delete', 'big']" @press="onPressKey" />
+        <key :text="closeButtonText" :type="['green', 'big']" @press="onPressKey" />
+      </div>
     </div>
   </transition>
 </template>
 
 <script>
 import { create } from '../utils';
+import Key from './Key';
 
 export default create({
   name: 'van-number-keyboard',
 
+  components: { Key },
+
   props: {
     show: Boolean,
+    title: String,
     closeButtonText: String,
     theme: {
       type: String,
@@ -50,7 +55,6 @@ export default create({
       type: String,
       default: ''
     },
-    title: String,
     zIndex: {
       type: Number,
       default: 100
@@ -85,12 +89,6 @@ export default create({
     this.handler(false);
   },
 
-  data() {
-    return {
-      active: -1
-    };
-  },
-
   watch: {
     show() {
       if (!this.transition) {
@@ -102,10 +100,26 @@ export default create({
   computed: {
     keys() {
       const keys = [];
-      for (let i = 0; i < 12; i++) {
-        const key = i === 10 ? 0 : i < 9 ? i + 1 : i === 9 ? this.extraKey : '';
-        keys.push(key);
+      for (let i = 1; i <= 9; i++) {
+        keys.push({ text: i });
       }
+
+      switch (this.theme) {
+        case 'default':
+          keys.push(
+            { text: this.extraKey, type: ['gray'] },
+            { text: 0 },
+            { text: 'delete', type: ['gray', 'delete'] }
+          );
+          break;
+        case 'custom':
+          keys.push(
+            { text: 0, type: ['middle'] },
+            { text: this.extraKey }
+          );
+          break;
+      }
+
       return keys;
     },
 
@@ -113,6 +127,10 @@ export default create({
       return {
         zIndex: this.zIndex
       };
+    },
+
+    showTitleClose() {
+      return this.closeButtonText && this.theme === 'default';
     }
   },
 
@@ -120,32 +138,30 @@ export default create({
     handler(action) {
       if (action !== this.handlerStatus && this.hideOnClickOutside) {
         this.handlerStatus = action;
-        document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.blurKeyboard);
+        document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.onBlur);
       }
     },
 
-    focus(event) {
-      this.active = parseInt(event.target.dataset.key);
-      if (this.active === 11) {
-        this.$emit('delete');
-      } else if (!isNaN(this.active)) {
-        const key = this.keys[this.active];
-        if (key !== '') {
-          this.$emit('input', key);
-        }
-      }
-    },
-
-    blurKey() {
-      this.active = -1;
-    },
-
-    blurKeyboard() {
+    onBlur() {
       this.$emit('blur');
     },
 
     onAnimationEnd() {
       this.$emit(this.show ? 'show' : 'hide');
+    },
+
+    onPressKey(text) {
+      if (text === '') {
+        return;
+      }
+
+      if (text === 'delete') {
+        this.$emit('delete');
+      } else if (text === this.closeButtonText) {
+        this.onBlur();
+      } else {
+        this.$emit('input', text);
+      }
     }
   }
 });

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

@@ -1,5 +1,7 @@
 @import "./common/var.css";
 
+$van-number-keyboard-key-height: 54px;
+
 .van-number-keyboard {
   left: 0;
   bottom: 0;
@@ -10,13 +12,16 @@
   animation-timing-function: ease-out;
 
   &__title {
-    font-weight: 400;
-    text-align: center;
-    color: $gray-dark;
-    font-size: 12px;
     height: 30px;
+    font-size: 14px;
     line-height: 30px;
+    text-align: center;
     position: relative;
+    color: $gray-darker;
+  }
+
+  &__body {
+    box-sizing: border-box;
   }
 
   &__close {
@@ -31,36 +36,70 @@
     }
   }
 
-  i {
-    width: calc(100%/3);
-    height: 54px;
-    font-size: 24px;
-    line-height: 54px;
-    font-style: normal;
-    text-align: center;
-    display: inline-block;
-    vertical-align: middle;
+  &__sidebar {
+    right: 0;
+    bottom: 0;
+    width: 25%;
+    position: absolute;
+    height: calc($van-number-keyboard-key-height * 4);
+  }
+
+  &--custom {
+    .van-number-keyboard__body {
+      padding-right: 25%;
+    }
+  }
+}
+
+.van-key {
+  width: calc(100%/3);
+  font-size: 24px;
+  font-style: normal;
+  text-align: center;
+  display: inline-block;
+  vertical-align: middle;
+  height: $van-number-keyboard-key-height;
+  line-height: $van-number-keyboard-key-height;
+
+  &::after {
+    border-width: 1px 1px 0 0;
+  }
+
+  &--middle {
+    width: calc(200%/3);
+  }
+
+  &--big {
+    width: 100%;
+    height: calc($van-number-keyboard-key-height * 2);
+    line-height: calc($van-number-keyboard-key-height * 2);
+  }
+
+  &--green {
+    font-size: 20px;
+    color: $white;
+    background-color: $green;
+
+    &.van-key--active {
+      background-color: #308305;
+    }
 
     &::after {
-      border-top-width: 1px;
-    }
-
-    &:not(:nth-of-type(3n))::after {
-      border-right-width: 1px;
-    }
-
-    &:nth-of-type(10),
-    &:nth-of-type(12) {
-      background-color: #F3F3F6;
+      border-color: $green;
     }
   }
 
-  &__delete {
+  &--delete {
+    font-size: 0;
     background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAeCAMAAABg6AyVAAAAbFBMVEUAAAAfHiIdHB4eHR8dHR4eHB4dHB4dHR8gICIdHB4dHB4dHB4dHB8eHh8hISEeHR8fHB8fHR8fHR8fHx8eHiArKyszMzMeHB8eHB8fHR8eHiAeHh4dHB4vLjDY2Nn////b29zKysq9vb28vLzkfBRpAAAAHHRSTlMAK/PW+I/llBv77N1kSCPwWlFAOTMGBb28hHlu08g5sgAAAMlJREFUOMuV1MsWgiAQgGHQyOx+s+sgYO//jnnMGIdDDfwbN99CYEDQFiVEKkolPUG7gl9VTWC31NKuDbVz+Fc1tRJtPDmxS2BS3p5ZC+XXnnbAVoz2WEBCH7uZAalzGoa06whGiznT6sG2xgX4QO2Aej1+KN7XBKL2FvGaMtTWBhbQhtoaYzVQrHKwuGf8hhAPSF5g3xPSt45sCHcouNWx436FGA+RHyQcD35EcUj54U8ff4WYvVi1zLjelUh/OG6XjOeLWv5hfAOI+HLwwOAqhAAAAABJRU5ErkJggg==") no-repeat center center;
     background-size: auto 15px;
   }
 
-  i&--active {
-    background-color: $active-color!important;
+  &--gray {
+    background-color: #F3F3F6;
+  }
+
+  &--active {
+    background-color: $active-color;
   }
 }