refactor(NumberKeyboard): new style

chuanfoo · Apr 19, 2020 · 3188b4d · 3188b4d
1 parent 422a0f6
commit 3188b4d
Show file tree

Hide file tree

Showing 8 changed files with 675 additions and 132 deletions.
diff --git a/src/number-keyboard/Key.js b/src/number-keyboard/Key.js
@@ -1,6 +1,5 @@
 import { createNamespace } from '../utils';
 import { TouchMixin } from '../mixins/touch';
-import { BORDER } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('key');
 
@@ -10,10 +9,9 @@ export default createComponent({
   props: {
     type: String,
     text: [Number, String],
-    theme: {
-      type: Array,
-      default: () => [],
-    },
+    color: String,
+    wider: Boolean,
+    large: Boolean,
   },
 
   data() {
@@ -22,22 +20,6 @@ export default createComponent({
     };
   },
 
-  computed: {
-    className() {
-      const classNames = this.theme.slice(0);
-
-      if (this.active) {
-        classNames.push('active');
-      }
-
-      if (this.type) {
-        classNames.push(this.type);
-      }
-
-      return bem(classNames);
-    },
-  },
-
   mounted() {
     this.bindTouchEvent(this.$el);
   },
@@ -69,9 +51,22 @@ export default createComponent({
 
   render() {
     return (
-      <i role="button" tabindex="0" class={[BORDER, this.className]}>
-        {this.slots('default') || this.text}
-      </i>
+      <div class={bem('wrapper', { wider: this.wider })}>
+        <div
+          role="button"
+          tabindex="0"
+          class={bem([
+            this.color,
+            {
+              large: this.large,
+              active: this.active,
+              delete: this.type === 'delete',
+            },
+          ])}
+        >
+          {this.slots('default') || this.text}
+        </div>
+      </div>
     );
   },
 });
diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue
@@ -32,13 +32,15 @@
     </demo-block>
 
     <demo-block :title="t('bindValue')">
-      <van-field
-        readonly
-        clickable
-        :value="value"
-        :placeholder="t('clickToInput')"
-        @touchstart.native.stop="keyboard = 'bindValue'"
-      />
+      <van-cell-group>
+        <van-field
+          readonly
+          clickable
+          :value="value"
+          :placeholder="t('clickToInput')"
+          @touchstart.native.stop="keyboard = 'bindValue'"
+        />
+      </van-cell-group>
 
       <van-number-keyboard
         v-model="value"
@@ -138,6 +140,7 @@ export default {
 
 .demo-number-keyboard {
   padding-bottom: 300px;
+  background: @white;
 
   .van-button {
     margin-left: @padding-md;

diff --git a/src/number-keyboard/index.js b/src/number-keyboard/index.js
@@ -1,12 +1,9 @@
 import { createNamespace } from '../utils';
 import { stopPropagation } from '../utils/dom/event';
-import { BORDER_TOP } from '../utils/constant';
 import { BindEventMixin } from '../mixins/bind-event';
 import Key from './Key';
 
 const [createComponent, bem, t] = createNamespace('number-keyboard');
-const CLOSE_KEY_THEME = ['blue', 'big'];
-const DELETE_KEY_THEME = ['delete', 'big', 'gray'];
 
 export default createComponent({
   mixins: [
@@ -79,18 +76,18 @@ export default createComponent({
       switch (this.theme) {
         case 'default':
           keys.push(
-            { text: this.extraKey, theme: ['gray'], type: 'extra' },
+            { text: this.extraKey, type: 'extra', color: 'gray' },
             { text: 0 },
             {
-              theme: ['gray'],
               text: this.showDeleteKey ? this.deleteText : '',
               type: this.showDeleteKey ? 'delete' : '',
+              color: 'gray',
             }
           );
           break;
         case 'custom':
           keys.push(
-            { text: 0, theme: ['middle'] },
+            { text: 0, wider: true },
             { text: this.extraKey, type: 'extra' }
           );
           break;
@@ -147,7 +144,7 @@ export default createComponent({
       }
 
       return (
-        <div class={[bem('title'), BORDER_TOP]}>
+        <div class={bem('title')}>
           {titleLeft && <span class={bem('title-left')}>{titleLeft}</span>}
           {title && <span>{title}</span>}
           {showClose && (
@@ -170,7 +167,8 @@ export default createComponent({
           key={key.text}
           text={key.text}
           type={key.type}
-          theme={key.theme}
+          wider={key.wider}
+          color={key.color}
           onPress={this.onPress}
         >
           {key.type === 'delete' && this.slots('delete')}
@@ -185,18 +183,19 @@ export default createComponent({
           <div class={bem('sidebar')}>
             {this.showDeleteKey && (
               <Key
+                large
                 text={this.deleteText}
                 type="delete"
-                theme={DELETE_KEY_THEME}
                 onPress={this.onPress}
               >
                 {this.slots('delete')}
               </Key>
             )}
             <Key
+              large
               text={this.closeButtonText}
               type="close"
-              theme={CLOSE_KEY_THEME}
+              color="blue"
               onPress={this.onPress}
             />
           </div>
@@ -206,19 +205,21 @@ export default createComponent({
   },
 
   render() {
+    const Title = this.genTitle();
+
     return (
       <transition name={this.transition ? 'van-slide-up' : ''}>
         <div
           vShow={this.show}
           style={{ zIndex: this.zIndex }}
-          class={bem([this.theme, { unfit: !this.safeAreaInsetBottom }])}
+          class={bem({ unfit: !this.safeAreaInsetBottom, 'with-title': Title })}
           onTouchstart={stopPropagation}
           onAnimationend={this.onAnimationEnd}
           onWebkitAnimationEnd={this.onAnimationEnd}
         >
-          {this.genTitle()}
+          {Title}
           <div class={bem('body')}>
-            {this.genKeys()}
+            <div class={bem('keys')}>{this.genKeys()}</div>
             {this.genSidebar()}
           </div>
         </div>

diff --git a/src/number-keyboard/index.less b/src/number-keyboard/index.less
@@ -11,9 +11,15 @@
   background-color: @number-keyboard-background-color;
   user-select: none;
 
+  &--with-title {
+    border-radius: 20px 20px 0 0;
+  }
+
   &__title {
     position: relative;
+    box-sizing: content-box;
     height: @number-keyboard-title-height;
+    padding-top: 6px;
     color: @number-keyboard-title-color;
     font-size: @number-keyboard-title-font-size;
     line-height: @number-keyboard-title-height;
@@ -26,8 +32,14 @@
   }
 
   &__body {
-    position: relative;
-    box-sizing: border-box;
+    display: flex;
+    padding: 6px 0 0 6px;
+  }
+
+  &__keys {
+    display: flex;
+    flex: 3;
+    flex-wrap: wrap;
   }
 
   &__close {
@@ -39,24 +51,14 @@
     cursor: pointer;
 
     &:active {
-      background-color: @number-keyboard-key-active-color;
+      opacity: @active-opacity;
     }
   }
 
   &__sidebar {
-    position: absolute;
-    right: 0;
-    bottom: 0;
     display: flex;
+    flex: 1;
     flex-direction: column;
-    width: 25%;
-    height: @number-keyboard-key-height * 4;
-  }
-
-  &--custom {
-    .van-number-keyboard__body {
-      padding-right: 25%;
-    }
   }
 
   &--unfit {
@@ -65,59 +67,50 @@
 }
 
 .van-key {
-  display: inline-block;
-  width: 100% / 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: @number-keyboard-key-height;
   font-size: @number-keyboard-key-font-size;
-  font-style: normal;
-  line-height: @number-keyboard-key-height;
-  text-align: center;
-  vertical-align: middle;
+  line-height: 1.5;
+  background-color: @white;
+  border-radius: @border-radius-lg;
   cursor: pointer;
 
-  &::after {
-    border-width: @border-width-base @border-width-base 0 0;
+  &--large {
+    height: 100%;
   }
 
-  &--middle {
-    width: 200% / 3;
+  &--blue,
+  &--delete {
+    font-size: @number-keyboard-delete-font-size;
   }
 
-  &--big {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
+  &--gray {
+    background-color: @number-keyboard-key-background;
   }
 
-  &--blue,
-  &--delete {
-    font-size: @number-keyboard-delete-font-size;
+  &--active {
+    background-color: @number-keyboard-key-active-color;
   }
 
   &--blue {
     color: @number-keyboard-button-text-color;
     background-color: @number-keyboard-button-background-color;
 
     &.van-key--active {
-      background-color: @number-keyboard-button-background-color;
-    }
-
-    &::after {
-      border-color: @number-keyboard-button-background-color;
-    }
-
-    &:active {
       background-color: darken(@number-keyboard-button-background-color, 10%);
     }
   }
 
-  &--gray {
-    background-color: @number-keyboard-key-background;
-  }
+  &__wrapper {
+    flex: 1;
+    flex-basis: 33%;
+    box-sizing: border-box;
+    padding: 0 6px 6px 0;
 
-  &--active {
-    background-color: @number-keyboard-key-active-color;
+    &--wider {
+      flex-basis: 66%;
+    }
   }
 }