[improvement] NumberKeyboard: add close-button-text prop (#2051)

packages/number-keyboard/Key.vue

@@ -1,12 +1,11 @@
 <template>
   <i
     v-text="text"
+    :class="['van-hairline', className]"
     @touchstart.stop.prevent="onFocus"
     @touchmove="onBlur"
     @touchend="onBlur"
     @touchcancel="onBlur"
-    class="van-hairline"
-    :class="[b(), className]"
   />
 </template>
 
@@ -34,8 +33,7 @@ export default create({
     className() {
       const types = this.type.slice(0);
       this.active && types.push('active');
-
+      return this.b(types);
-      return types.map(type => this.b([type]));
     }
   },
 

packages/number-keyboard/en-US.md

@@ -70,6 +70,7 @@ export default {
 | z-index | Keyboard z-index | `Number` | `100` |
 | extra-key | Content of bottom left key | `String` | `''` |
 | close-button-text | Close button text | `String` | `-` |
+| delete-button-text | Delete button text | `String` | `delete` |
 | show-delete-key | Whether to show delete button | `Boolean` | `true` |
 | hide-on-click-outside | Whether to hide keyboard when click outside | `Boolean` | `true` |
 

packages/number-keyboard/index.less

@@ -73,8 +73,12 @@
     line-height: @number-keyboard-key-height * 2;
   }
 
+  &--blue,
+  &--delete {
+    font-size: 16px;
+  }
+
   &--blue {
-    font-size: 20px;
     color: @white;
     background-color: @blue;
 
@@ -87,14 +91,8 @@
     }
   }
 
-  &--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;
-  }
-
   &--gray {
-    background-color: @background-color;
+    background-color: @number-keyboard-key-background;
   }
 
   &--active {

packages/number-keyboard/index.vue

@@ -27,7 +27,7 @@
         />
       </div>
       <div v-if="theme === 'custom'" :class="b('sidebar')">
-        <key :text="'delete'" :type="['delete', 'big']" @press="onPressKey" />
+        <key :text="deleteText" :type="['delete', 'big', 'gray']" @press="onPressKey" />
         <key :text="closeButtonText" :type="['blue', 'big']" @press="onPressKey" />
       </div>
     </div>
@@ -47,6 +47,7 @@ export default create({
     show: Boolean,
     title: String,
     closeButtonText: String,
+    deleteButtonText: String,
     theme: {
       type: String,
       default: 'default'
@@ -109,7 +110,7 @@ export default create({
           keys.push(
             { text: this.extraKey, type: ['gray'] },
             { text: 0 },
-            { text: 'delete', type: ['gray', 'delete'] }
+            { text: this.deleteText, type: ['gray', 'delete'] }
           );
           break;
         case 'custom':
@@ -131,6 +132,10 @@ export default create({
 
     showTitleClose() {
       return this.closeButtonText && this.theme === 'default';
+    },
+
+    deleteText() {
+      return this.deleteButtonText || this.$t('delete');
     }
   },
 
@@ -165,7 +170,7 @@ export default create({
         return;
       }
 
-      if (text === 'delete') {
+      if (text === this.deleteText) {
         this.$emit('delete');
       } else if (text === this.closeButtonText) {
         this.onClose();

packages/number-keyboard/test/__snapshots__/demo.spec.js.snap

@@ -18,9 +18,9 @@ exports[`renders demo correctly 1`] = `
         <i class="van-hairline van-key">7</i>
         <i class="van-hairline van-key">8</i>
         <i class="van-hairline van-key">9</i>
-        <i class="van-hairline van-key van-key van-key--gray">.</i>
+        <i class="van-hairline van-key van-key--gray">.</i>
         <i class="van-hairline van-key">0</i>
-        <i class="van-hairline van-key van-key van-key--gray van-key van-key--delete">delete</i>
+        <i class="van-hairline van-key van-key--gray van-key--delete">删除</i>
       </div>
       <!---->
     </div>
@@ -41,12 +41,12 @@ exports[`renders demo correctly 1`] = `
         <i class="van-hairline van-key">7</i>
         <i class="van-hairline van-key">8</i>
         <i class="van-hairline van-key">9</i>
-        <i class="van-hairline van-key van-key van-key--middle">0</i>
+        <i class="van-hairline van-key van-key--middle">0</i>
         <i class="van-hairline van-key">.</i>
       </div>
       <div class="van-number-keyboard__sidebar">
-        <i class="van-hairline van-key van-key van-key--delete van-key van-key--big">delete</i>
+        <i class="van-hairline van-key van-key--delete van-key--big van-key--gray">删除</i>
-        <i class="van-hairline van-key van-key van-key--blue van-key van-key--big">完成</i>
+        <i class="van-hairline van-key van-key--blue van-key--big">完成</i>
       </div>
     </div>
   </div>

packages/number-keyboard/zh-CN.md

@@ -70,6 +70,7 @@ export default {
 | z-index | 键盘 z-index | `Number` | `100` | - |
 | extra-key | 左下角按键内容 | `String` | `''` | - |
 | close-button-text | 关闭按钮文字，空则不展示 | `String` | `-` | - |
+| delete-button-text | 删除按钮文字 | `String` | `删除` | 1.4.3 |
 | show-delete-key | 是否展示删除按钮 | `Boolean` | `true` | - |
 | hide-on-click-outside | 点击外部时是否收起键盘 | `Boolean` | `true` | - |
 

packages/password-input/test/__snapshots__/demo.spec.js.snap

@@ -38,9 +38,9 @@ exports[`renders demo correctly 1`] = `
         <i class="van-hairline van-key">7</i>
         <i class="van-hairline van-key">8</i>
         <i class="van-hairline van-key">9</i>
-        <i class="van-hairline van-key van-key van-key--gray"></i>
+        <i class="van-hairline van-key van-key--gray"></i>
         <i class="van-hairline van-key">0</i>
-        <i class="van-hairline van-key van-key van-key--gray van-key van-key--delete">delete</i>
+        <i class="van-hairline van-key van-key--gray van-key--delete">删除</i>
       </div>
       <!---->
     </div>

packages/style/var.less

@@ -52,3 +52,4 @@
 
 // number keyboard
 @number-keyboard-key-height: 54px;
+@number-keyboard-key-background: #eBedf0;