upd: 数字键盘增加带右侧栏功能

src/packages/numberkeyboard/demo.vue

@@ -2,8 +2,18 @@
   <div class="demo-list">
     <h4>基本用法</h4>
     <div class="show-demo">
-      <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="弹出默认键盘"></nut-cell>
-      <nut-numberkeyboard :visible="visible" @input="input" @delete="onDelete" @close="close" @enter="enter" @leave="leave"> </nut-numberkeyboard>
+      <nut-cell :isLink="true" @click.native="showKeyBoard(1)" :showIcon="true" title="默认键盘"></nut-cell>
+      <nut-numberkeyboard :visible="visible1" @input="input" @delete="onDelete" @close="close(1)" @enter="enter" @leave="leave"> </nut-numberkeyboard>
+    </div>
+    <h4>带右侧栏键盘</h4>
+    <div class="show-demo">
+      <nut-cell :isLink="true" @click.native="showKeyBoard(2)" :showIcon="true" title="带右侧栏键盘"></nut-cell>
+      <nut-numberkeyboard type="rightColumn" :visible="visible2" :custom-key="customKey" @input="input" @close="close(2)"> </nut-numberkeyboard>
+    </div>
+    <h4>带标题栏键盘</h4>
+    <div class="show-demo">
+      <nut-cell :isLink="true" @click.native="showKeyBoard(3)" :showIcon="true" title="带标题栏键盘"></nut-cell>
+      <nut-numberkeyboard title="默认键盘" :visible="visible3" :custom-key="customKey" @input="input" @close="close(3)"> </nut-numberkeyboard>
     </div>
   </div>
 </template>
@@ -11,13 +21,17 @@
 export default {
   data() {
     return {
-      visible: false,
-      val: ''
+      title: '默认键盘',
+      visible1: false,
+      visible2: false,
+      visible3: false,
+      val: '',
+      customKey: ['.']
     };
   },
   methods: {
-    showKeyBoard() {
-      this.visible = true;
+    showKeyBoard(index) {
+      this[`visible${index}`] = true;
     },
     input(number) {
       this.$toast.text(`输入：${number}`);
@@ -25,8 +39,8 @@ export default {
     onDelete() {
       this.val = this.val.slice(0, this.val.length - 1);
     },
-    close() {
-      this.visible = false;
+    close(index) {
+      this[`visible${index}`] = false;
     },
     enter() {
       console.log('键盘抬起');

src/packages/numberkeyboard/doc.md

@@ -1,17 +1,14 @@
 # NumberKeyboard 数字键盘
 
-### 介绍
-
-数字虚拟键盘
-
 ### 默认样式
 
-数字键盘提供了 `input`、`delete`、`close`、`enter`、`leave` 事件，分别对应输入内容、删除内容和失去焦点的动作
+数字键盘提供了 `input`、`delete`、`close`、`enter`、`leave` 事件，分别对应输入内容、删除内容、键盘抬起和键盘关闭的动作
 
-```html
+```javascript
   <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="弹出默认键盘"></nut-cell>
   <nut-numberkeyboard
       :visible="visible"
+      title="默认键盘"
       @input="input"
       @close="close"
       @enter="enter"
@@ -20,7 +17,7 @@
   </nut-numberkeyboard>
 ```
 
-```js
+```javascript
 export default {
     data() {
         return {
@@ -48,3 +45,61 @@ export default {
 }
 ```
 > 点击键盘以外的区域时，键盘会默认自动收起。
+
+
+### 右侧栏键盘
+
+将 type 属性设置为 rightColumn 来展示键盘的右侧栏，常用于金钱支付的场景
+
+```javascript
+    <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="弹出右侧栏键盘"></nut-cell>
+    <nut-numberkeyboard
+        :visible="visible"
+        @input="input"
+        @close="close"
+    ></nut-numberkeyboard>
+```
+
+```javascript
+export default {
+    data() {
+        return {
+            visible: false,
+        };
+    },
+    methods: {
+        showKeyBoard() {
+            this.visible = true;
+        },
+        input(number) {
+            this.$toast.text(`输入：${number}`);
+        },
+        close() {
+            this.visible = false;
+        }
+    }
+}
+```
+
+
+## Prop
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| visible | 是否显示键盘 | boolean | false
+| title | 键盘标题 | string | - |
+| type | 键盘模式  | string | `default`：默认样式<br>`rightColumn`：带右侧栏 |
+
+
+
+
+
+## Event
+
+| 字段 | 说明 | 回调参数
+|----- | ----- | -----
+| input  | 点击按键时触发                 | 按键内容 |
+| delete | 点击删除键时触发               | -             |
+| close  | 点击关闭按钮或非键盘区域时触发  | -             |
+| enter  | 键盘弹出时触发             | -             |
+| leave  | 键盘收起时触发             | -             |

src/packages/numberkeyboard/numberkeyboard.scss

@@ -39,29 +39,52 @@
       display: flex;
       flex: 3;
       flex-wrap: wrap;
+    }
+    .key-board-wrapper {
+      position: relative;
+      flex: 1;
+      flex-basis: 33%;
+      box-sizing: border-box;
+      padding: 0 6px 6px 0;
+      .key {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 48px;
+        font-size: 28px;
+        line-height: 1.5;
+        background-color: #fff;
+        border-radius: 8px;
+        cursor: pointer;
+      }
+      .active {
+        background-color: #ebedf0;
+      }
+      img {
+        width: 30px;
+        height: 24px;
+      }
+    }
+    .number-board-sidebar {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
       .key-board-wrapper {
-        position: relative;
-        flex: 1;
-        flex-basis: 33%;
-        box-sizing: border-box;
-        padding: 0 6px 6px 0;
         .key {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: 48px;
-          font-size: 28px;
-          line-height: 1.5;
-          background-color: #fff;
-          border-radius: 8px;
-          cursor: pointer;
+          position: absolute;
+          top: 0;
+          right: 6px;
+          bottom: 6px;
+          left: 0;
+          height: auto;
         }
-        .active {
-          background-color: #ebedf0;
+        .finish {
+          font-size: 16px;
+          color: #fff;
+          background-color: #1989fa;
         }
-        img {
-          width: 30px;
-          height: 24px;
+        .activeFinsh {
+          background-color: #0570db;
         }
       }
     }

src/packages/numberkeyboard/numberkeyboard.vue

@@ -2,8 +2,8 @@
   <transition name="nut-board-slide-up" @after-enter="afterEnter" @after-leave="afterLeave">
     <div class="nut-numberkeyboard" v-show="visible">
       <div class="number-board-header">
-        <h3 class="tit">键盘标题</h3>
-        <span class="keyboard-close" @click="() => closeBoard()">完成</span>
+        <h3 class="tit">{{ title }}</h3>
+        <span class="keyboard-close" @click="() => closeBoard()" v-if="type == 'default'">完成</span>
       </div>
       <div class="number-board-body">
         <div class="number-board">
@@ -14,7 +14,7 @@
               @touchmove="event => onTouchMove(item, event)"
               @touchend="onTouchEnd"
             >
-              <template v-if="item.type == 'number'">{{ item.id }}</template>
+              <template v-if="item.type == 'number' || item.type == 'custom'">{{ item.id }}</template>
               <img
                 v-if="item.type == 'lock'"
                 src="https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png"
@@ -26,6 +26,23 @@
             </div>
           </div>
         </div>
+        <div class="number-board-sidebar" v-if="type == 'rightColumn'">
+          <div class="key-board-wrapper">
+            <div
+              :class="['key', { active: clickKeyIndex == 'delete' }]"
+              @touchstart="event => onTouchstart({ id: 'delete', type: 'delete' }, event)"
+              @touchmove="event => onTouchMove({ id: 'delete', type: 'delete' }, event)"
+              @touchend="onTouchEnd"
+            >
+              <img src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png" />
+            </div>
+          </div>
+          <div class="key-board-wrapper" @click="() => closeBoard()">
+            <div :class="['key', 'finish', { activeFinsh: clickKeyIndex == 'finish' }]">
+              完成
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </transition>
@@ -34,13 +51,28 @@
 export default {
   name: 'nut-numberkeyboard',
   props: {
+    title: {
+      type: String,
+      default: ''
+    },
     visible: {
       type: Boolean,
       default: false
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    customKey: {
+      type: Array,
+      default: () => []
     }
   },
   computed: {
     keysList() {
+      if (this.type == 'rightColumn') {
+        return this.genCustomKeys();
+      }
       return this.defaultKey();
     }
   },
@@ -65,7 +97,7 @@ export default {
           // console.log("在区域内");
         } else {
           // console.log("在区域外");
-          if (that.once == 0) {
+          if (that.once == 0 && that.visible) {
             that.once += 1;
             return false;
           }
@@ -73,12 +105,6 @@ export default {
         }
       });
     });
-    this.$nextTick(() => {
-      var f = that.$el;
-      f.addEventListener('webkitTransitionEnd', () => {
-        console.log(111);
-      });
-    });
   },
   methods: {
     getBasicKeys() {
@@ -91,6 +117,17 @@ export default {
     defaultKey() {
       return [...this.getBasicKeys(), { id: 'lock', type: 'lock' }, { id: 0, type: 'number' }, { id: 'delete', type: 'delete' }];
     },
+    genCustomKeys() {
+      const keys = this.getBasicKeys();
+      const { customKey } = this;
+      const customKeys = Array.isArray(customKey) ? customKey : [customKey];
+      if (customKeys.length === 1) {
+        keys.push({ id: 0, type: 'number' }, { id: customKeys[0], type: 'custom' });
+      } else if (customKeys.length === 2) {
+        keys.push({ id: customKeys[0], type: 'custom' }, { id: 0, type: 'number' }, { id: customKeys[1], type: 'custom' });
+      }
+      return keys;
+    },
     afterEnter() {
       this.$emit('enter');
     },
@@ -100,7 +137,7 @@ export default {
     onTouchstart(item, event) {
       event.stopPropagation();
       this.clickKeyIndex = item.id;
-      if (item.type == 'number') {
+      if (item.type == 'number' || item.type == 'custom') {
         this.$emit('input', item.id);
       }
       if (item.type == 'lock') {