upd: numberkeyboard 默认用法

src/config.json

@@ -671,6 +671,17 @@
       "showDemo": true,
       "author": "Ymm0008",
       "showTest": true
+    },
+    {
+      "version": "1.0.0",
+      "name": "NumberKeyboard",
+      "type": "component",
+      "chnName": "数字键盘",
+      "desc": "数字虚拟键盘，自定义键盘",
+      "sort": "1",
+      "showDemo": true,
+      "author": "Ymm0008",
+      "showTest": true
     }
   ]
 }

src/nutui.js

@@ -134,6 +134,8 @@ import './packages/fixednav/fixednav.scss'; // import Gesture from './packages/g
 
 import Collapse from './packages/collapse/index.js';
 import './packages/collapse/collapse.scss';
+import NumberKeyboard from './packages/numberkeyboard/index.js';
+import './packages/numberkeyboard/numberkeyboard.scss';
 
 const packages = {
   Cell,
@@ -198,8 +200,10 @@ const packages = {
   Address,
   Notify,
   CountUp,
-  FixedNav, // Gesture: Gesture
-  Collapse: Collapse
+  FixedNav,
+  // Gesture: Gesture
+  Collapse: Collapse,
+  NumberKeyboard: NumberKeyboard
 };
 
 const components = {};

src/packages/numberkeyboard/__test__/numberkeyboard.spec.js

@@ -0,0 +1,5 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import NumberKeyboard from '../numberkeyboard.vue';
+import Vue from 'vue';
+
+describe('NumberKeyboard.vue', () => {});

src/packages/numberkeyboard/demo.vue

@@ -0,0 +1,39 @@
+<template>
+  <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>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      val: ''
+    };
+  },
+  methods: {
+    showKeyBoard() {
+      this.visible = true;
+    },
+    input(number) {
+      this.$toast.text(`输入：${number}`);
+    },
+    onDelete() {
+      this.val = this.val.slice(0, this.val.length - 1);
+    },
+    close() {
+      this.visible = false;
+    },
+    enter() {
+      console.log('键盘抬起');
+    },
+    leave() {
+      console.log('键盘收起');
+    }
+  }
+};
+</script>

src/packages/numberkeyboard/doc.md

@@ -0,0 +1,50 @@
+# NumberKeyboard 数字键盘
+
+### 介绍
+
+数字虚拟键盘
+
+### 默认样式
+
+数字键盘提供了 `input`、`delete`、`close`、`enter`、`leave` 事件，分别对应输入内容、删除内容和失去焦点的动作
+
+```html
+  <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>
+```
+
+```js
+export default {
+    data() {
+        return {
+            visible: false,
+            val: ''
+        };
+    },
+    methods: {
+        showKeyBoard() {
+            this.visible = true;
+        },
+        input(number) {
+            this.$toast.text(`输入：${number}`);
+        },
+        close() {
+            this.visible = false;
+        },
+        enter() {
+            console.log('键盘抬起');
+        },
+        leave() {
+            console.log('键盘收起');
+        },
+    }
+}
+```
+> 点击键盘以外的区域时，键盘会默认自动收起。

src/packages/numberkeyboard/index.js

@@ -0,0 +1,8 @@
+import NumberKeyboard from './numberkeyboard.vue';
+import './numberkeyboard.scss';
+
+NumberKeyboard.install = function(Vue) {
+  Vue.component(NumberKeyboard.name, NumberKeyboard);
+};
+
+export default NumberKeyboard;

src/packages/numberkeyboard/numberkeyboard.scss

@@ -0,0 +1,87 @@
+.nut-numberkeyboard {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  width: 100%;
+  padding-bottom: 22px;
+  background-color: #f2f3f5;
+  user-select: none;
+  .number-board-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    height: 34px;
+    padding-top: 6px;
+    color: #646566;
+    font-size: 16px;
+    .tit {
+      display: inline-block;
+    }
+    .keyboard-close {
+      position: absolute;
+      display: block;
+      right: 0;
+      padding: 0 16px;
+      color: #576b95;
+      font-size: 14px;
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+    }
+  }
+  .number-board-body {
+    display: flex;
+    padding: 6px 0 0 6px;
+    .number-board {
+      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;
+        }
+      }
+    }
+  }
+}
+.nut-board-slide-up {
+  &-enter-active {
+    animation: nut-board-slide-up-enter 0.3s both ease-out;
+  }
+  &-leave-active {
+    animation: nut-board-slide-up-leave 0.3s both ease-in;
+  }
+}
+@keyframes nut-board-slide-up-enter {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+@keyframes nut-board-slide-up-leave {
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}

src/packages/numberkeyboard/numberkeyboard.vue

@@ -0,0 +1,128 @@
+<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">
+        <h3 class="tit">键盘标题</h3>
+        <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', { active: item.id == clickKeyIndex }, { lock: item.type == 'lock' }, { delete: item.type == 'delete' }]"
+              @touchstart="event => onTouchstart(item, event)"
+              @touchmove="event => onTouchMove(item, event)"
+              @touchend="onTouchEnd"
+            >
+              <template v-if="item.type == 'number'">{{ item.id }}</template>
+              <img
+                v-if="item.type == 'lock'"
+                src="https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png"
+              />
+              <img
+                v-if="item.type == 'delete'"
+                src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+export default {
+  name: 'nut-numberkeyboard',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    keysList() {
+      return this.defaultKey();
+    }
+  },
+  data() {
+    return {
+      once: 0,
+      keys: [],
+      clickKeyIndex: undefined
+    };
+  },
+  beforeDestroy() {
+    document.getElementsByTagName('body')[0].removeEventListener('click', () => {});
+  },
+  mounted() {
+    let that = this;
+    this.$nextTick(() => {
+      let targetArea = that.$el;
+      document.getElementsByTagName('body')[0].addEventListener('click', function(event) {
+        let e = event || window.event;
+        let elem = e.target;
+        if (targetArea.contains(elem)) {
+          // console.log("在区域内");
+        } else {
+          // console.log("在区域外");
+          if (that.once == 0) {
+            that.once += 1;
+            return false;
+          }
+          that.closeBoard();
+        }
+      });
+    });
+    this.$nextTick(() => {
+      var f = that.$el;
+      f.addEventListener('webkitTransitionEnd', () => {
+        console.log(111);
+      });
+    });
+  },
+  methods: {
+    getBasicKeys() {
+      const keys = [];
+      for (let i = 1; i <= 9; i++) {
+        keys.push({ id: i, type: 'number' });
+      }
+      return keys;
+    },
+    defaultKey() {
+      return [...this.getBasicKeys(), { id: 'lock', type: 'lock' }, { id: 0, type: 'number' }, { id: 'delete', type: 'delete' }];
+    },
+    afterEnter() {
+      this.$emit('enter');
+    },
+    afterLeave() {
+      this.$emit('leave');
+    },
+    onTouchstart(item, event) {
+      event.stopPropagation();
+      this.clickKeyIndex = item.id;
+      if (item.type == 'number') {
+        this.$emit('input', item.id);
+      }
+      if (item.type == 'lock') {
+        this.closeBoard();
+      }
+      if (item.type == 'delete') {
+        this.$emit('delete');
+      }
+    },
+    onTouchMove(id, event) {
+      event.stopPropagation();
+      // this.clickKeyIndex = id;
+    },
+    onTouchEnd() {
+      this.clickKeyIndex = undefined;
+    },
+    closeBoard() {
+      if (this.once > 0) {
+        this.once = 0;
+        this.$emit('close');
+      }
+    }
+  }
+};
+</script>

types/nutui.d.ts

@@ -85,3 +85,4 @@ export declare class CountUp extends UIComponent {}
 export declare class FixedNav extends UIComponent {}
 export declare class Gesture extends UIComponent {}
 export declare class Collapse extends UIComponent {}
+export declare class NumberKeyboard extends UIComponent {}