fix: 增加双向绑定&标题栏&文档完善

src/packages/numberkeyboard/demo.vue

@@ -8,12 +8,21 @@
     <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>
+      <nut-numberkeyboard type="rightColumn" :visible="visible2" :custom-key="customKey1" @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>
+      <nut-cell :isLink="true" @click.native="showKeyBoard(3)" :showIcon="true" title="带标题栏键盘">22</nut-cell>
+      <nut-numberkeyboard title="默认键盘" :visible="visible3" :custom-key="customKey2" @input="input" @close="close(3)"> </nut-numberkeyboard>
+    </div>
+    <h4>双向绑定的键盘</h4>
+    <div class="show-demo">
+      <div class="boardValue" @click="showKeyBoard(4)">
+        <div class="value">
+          <nut-textinput placeholder="请输入内容" :has-border="false" v-model="value" readonly label="双向绑定：" />
+        </div>
+      </div>
+      <nut-numberkeyboard :visible="visible4" v-model="value" maxlength="8" @close="close(4)"> </nut-numberkeyboard>
     </div>
   </div>
 </template>
@@ -25,8 +34,10 @@ export default {
       visible1: false,
       visible2: false,
       visible3: false,
-      val: '',
-      customKey: ['.']
+      visible4: false,
+      value: '',
+      customKey1: ['.'],
+      customKey2: ['.']
     };
   },
   methods: {
@@ -51,3 +62,24 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.boardValue {
+  padding: 2px 10px;
+  font-size: 14px;
+  background: #ffffff;
+  input {
+    border: none;
+  }
+  // .label,.value {
+  //   width: 20%;
+  //   display: inline-block;
+  //   line-height: 1.5;
+  //   font-size: 14px;
+  //   color: #2d2d2d;
+  // }
+  // .value {
+  //   width: 75%;
+  // }
+}
+</style>

src/packages/numberkeyboard/doc.md

@@ -4,17 +4,16 @@
 
 数字键盘提供了 `input`、`delete`、`close`、`enter`、`leave` 事件，分别对应输入内容、删除内容、键盘抬起和键盘关闭的动作
 
+
 ```javascript
-  <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="弹出默认键盘"></nut-cell>
-  <nut-numberkeyboard
-      :visible="visible"
-      title="默认键盘"
-      @input="input"
-      @close="close"
-      @enter="enter"
-      @leave="leave"
-  >
-  </nut-numberkeyboard>
+    <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="默认键盘"></nut-cell>
+    <nut-numberkeyboard
+        :visible="visible"
+        @input="input"
+        @close="close"
+        @enter="enter"
+        @leave="leave"
+    ></nut-numberkeyboard>
 ```
 
 ```javascript
@@ -52,9 +51,48 @@ export default {
 将 type 属性设置为 rightColumn 来展示键盘的右侧栏，常用于金钱支付的场景
 
 ```javascript
-    <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="弹出右侧栏键盘"></nut-cell>
+    <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="带右侧栏键盘"></nut-cell>
     <nut-numberkeyboard
         :visible="visible"
+        :custom-key="customKey"
+        @input="input"
+        @close="close"
+    ></nut-numberkeyboard>
+```
+
+```javascript
+export default {
+    data() {
+        return {
+            visible: false,
+            customKey: ['.']
+        };
+    },
+    methods: {
+        showKeyBoard() {
+            this.visible = true;
+        },
+        input(number) {
+            this.$toast.text(`输入：${number}`);
+        },
+        close() {
+            this.visible = false;
+        }
+    }
+}
+```
+
+
+### 带标题栏键盘
+
+通过 title 属性可以设置键盘标题
+
+```javascript
+    <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="带标题栏键盘"></nut-cell>
+    <nut-numberkeyboard 
+        title="默认键盘" 
+        :visible="visible"
+        :custom-key="customKey"
         @input="input"
         @close="close"
     ></nut-numberkeyboard>
@@ -65,6 +103,7 @@ export default {
     data() {
         return {
             visible: false,
+            customKey: ['.']
         };
     },
     methods: {
@@ -82,6 +121,46 @@ export default {
 ```
 
 
+### 双向绑定键盘
+
+可以通过 `v-model` 绑定键盘当前输入值
+
+```javascript
+    <nut-textinput 
+        placeholder="请输入内容"
+        :has-border="false"
+        v-model="value" 
+        readonly 
+        label="双向绑定：" 
+    />
+    <nut-numberkeyboard
+        :visible="visible"
+        v-model="value"
+        maxlength="8"
+        @close="close"
+    ></nut-numberkeyboard>
+```
+
+```javascript
+export default {
+    data() {
+        return {
+            visible: false,
+            value: ''
+        };
+    },
+    methods: {
+        showKeyBoard() {
+            this.visible = true;
+        },
+        close() {
+            this.visible = false;
+        }
+    }
+}
+```
+
+
 ## Prop
 
 | 字段 | 说明 | 类型 | 默认值
@@ -89,7 +168,9 @@ export default {
 | visible | 是否显示键盘 | boolean | false
 | title | 键盘标题 | string | - |
 | type | 键盘模式  | string | `default`：默认样式<br>`rightColumn`：带右侧栏 |
-
+| customKey | 自定义键盘额外的键  | array<br>string | 数组形式最多支持添加2个,超出默认取前2项 |
+| v-model | 当前输入值 | string | - |
+| maxlength  | 输入值最大长度，结合 v-model 使用 | number <br> string| 6 |
 
 
 

src/packages/numberkeyboard/numberkeyboard.scss

@@ -2,7 +2,7 @@
   position: fixed;
   bottom: 0;
   left: 0;
-  z-index: 100;
+  z-index: 10000;
   width: 100%;
   padding-bottom: 22px;
   background-color: #f2f3f5;
@@ -65,6 +65,9 @@
         height: 24px;
       }
     }
+    .key-board-wrapper-large {
+      flex-basis: 66%;
+    }
     .number-board-sidebar {
       display: flex;
       flex: 1;

src/packages/numberkeyboard/numberkeyboard.vue

@@ -1,13 +1,20 @@
 <template>
   <transition name="nut-board-slide-up" @after-enter="afterEnter" @after-leave="afterLeave">
     <div class="nut-numberkeyboard" v-show="visible">
-      <div class="number-board-header">
+      <div class="number-board-header" v-if="title">
         <h3 class="tit">{{ title }}</h3>
-        <span class="keyboard-close" @click="() => closeBoard()" v-if="type == 'default'">完成</span>
+        <span class="keyboard-close" @click="() => closeBoard()">完成</span>
       </div>
       <div class="number-board-body">
         <div class="number-board">
-          <div class="key-board-wrapper" v-for="item of keysList" :key="'key' + item.id">
+          <div
+            :class="[
+              'key-board-wrapper',
+              { 'key-board-wrapper-large': item.id == 0 && type == 'rightColumn' && Array.isArray(customKey) && customKey.length == 1 }
+            ]"
+            v-for="item of keysList"
+            :key="'key' + item.id"
+          >
             <div
               :class="['key', { active: item.id == clickKeyIndex }, { lock: item.type == 'lock' }, { delete: item.type == 'delete' }]"
               @touchstart="event => onTouchstart(item, event)"
@@ -66,11 +73,23 @@ export default {
     customKey: {
       type: Array,
       default: () => []
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    maxlength: {
+      type: [Number, String],
+      default: 6
     }
   },
+  model: {
+    prop: 'value',
+    event: 'update:value'
+  },
   computed: {
     keysList() {
-      if (this.type == 'rightColumn') {
+      if (this.type == 'rightColumn' || this.title != '') {
         return this.genCustomKeys();
       }
       return this.defaultKey();
@@ -120,11 +139,21 @@ export default {
     genCustomKeys() {
       const keys = this.getBasicKeys();
       const { customKey } = this;
-      const customKeys = Array.isArray(customKey) ? customKey : [customKey];
+      let customKeys = Array.isArray(customKey) ? customKey : [customKey];
+      if (customKeys.length > 2) {
+        customKeys = [customKeys[0], customKeys[1]];
+      }
       if (customKeys.length === 1) {
-        keys.push({ id: 0, type: 'number' }, { id: customKeys[0], type: 'custom' });
+        if (this.title) {
+          keys.push({ id: customKeys[0], type: 'custom' }, { id: 0, type: 'number' }, { id: 'delete', type: 'delete' });
+        } else {
+          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' });
+        if (this.title) {
+          keys.push({ id: 'delete', type: 'delete' });
+        }
       }
       return keys;
     },
@@ -139,12 +168,16 @@ export default {
       this.clickKeyIndex = item.id;
       if (item.type == 'number' || item.type == 'custom') {
         this.$emit('input', item.id);
+        if (this.value.length < this.maxlength) {
+          this.$emit('update:value', this.value + item.id);
+        }
       }
       if (item.type == 'lock') {
         this.closeBoard();
       }
       if (item.type == 'delete') {
         this.$emit('delete');
+        this.$emit('update:value', this.value.slice(0, this.value.length - 1));
       }
     },
     onTouchMove(id, event) {