component/keyboard/index.js

Component({
  properties: {
    show: {
      type: Boolean,
      value: false
    },
  },
  data: {
    input_money:''
  },
  //锁屏
  methods: {
    //键盘传值到页面
    tapNum(event) {
      this.triggerEvent('onKey',{keyboard:event.currentTarget.dataset.text} ,{})
    },
    //键盘传值到页面
    showKeyboard(event) {
      this.setData({
        show:!this.data.show
      })
      this.triggerEvent('show',{show:!this.data.show} ,{})
    },   
    touchmove: function () {
    }
  },
})

component/keyboard/index.json

{
  "component": true
}

component/keyboard/index.wxml

<view class="Keyboard" catchtouchmove="touchmove" hidden="{{!show}}">
  <view class="keyenter" bindtap="showKeyboard">完成</view>
  <view class="number">
    <view data-text="1" bind:tap="tapNum" hover-class="keyclick">1</view>
    <view data-text="2" bind:tap="tapNum" hover-class="keyclick">2</view>
    <view data-text="3" bind:tap="tapNum" hover-class="keyclick">3</view>
    <view data-text="4" bind:tap="tapNum" hover-class="keyclick">4</view>
    <view data-text="5" bind:tap="tapNum" hover-class="keyclick">5</view>
    <view data-text="6" bind:tap="tapNum" hover-class="keyclick">6</view>
    <view data-text="7" bind:tap="tapNum" hover-class="keyclick">7</view>
    <view data-text="8" bind:tap="tapNum" hover-class="keyclick">8</view>
    <view data-text="9" bind:tap="tapNum" hover-class="keyclick">9</view>
    <view data-text="." bind:tap="tapNum" hover-class="keyclick">.</view>
    <view data-text="0" bind:tap="tapNum" hover-class="keyclick">0</view>
    <view data-text="backspace" bind:tap="tapNum" hover-class="keyclick">
      <image src="/img/backspace.png" />
    </view>
  </view>
  <view class="overlay" bindtap="showKeyboard"></view>
</view>

component/keyboard/index.wxss

/*模拟键盘*/
.Keyboard{position:fixed;bottom: 0px;left: 0px;right: 0px;z-index:120;height:290px;-webkit-box-shadow:0px -2px 8px #D6D6D6; box-shadow:0px -2px 8px #D6D6D6;}
.Keyboard .keyenter{position: absolute;top: 0px;left: 0px;right: 0px;z-index:500;height:50px;line-height: 50px;background: #FFF;text-align:center;font-size: 16px;color: #FE6862}
.Keyboard .number{position: absolute;top:50px;bottom: 0px;left: 0px;right: 0px;z-index:500;text-align: center;font-size:50rpx;background: #FFF;border-top:1px #F1F0F6 solid;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction: row;-webkit-flex-direction: row;flex-direction: row;}
.Keyboard .number view{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;min-width:33%;max-width: 33.3333%;height:60px;line-height: 60px;box-sizing:border-box;border-right:1rpx solid #EEEEEE;border-bottom: 1rpx solid #EEEEEE;}
.Keyboard .number .keyclick{background: #FAFAFA}
.Keyboard .number image{width: 30px;height: 30px;vertical-align: middle;margin-bottom: 10px;}
.Keyboard .overlay{z-index:90;background-color:rgba(0, 0, 0,0);position:fixed;top:0;left:0;right:0;bottom:0;}
.fn-hide{display: none;}

应用中调用键盘插件

在json中增加

"usingComponents": {
    "keyboard": "./component/keyboard/index",
}

在wxml调用插件

<keyboard show="{{showKeyboard}}" bind:onKey="onKeyboard" bind:show="showKeyboard"/>

在js中调用

 showKeyboard() {
    this.setData({
      showKeyboard:!this.data.showKeyboard,
    });
  },
  //虚拟键盘输入
  onKeyboard(event) {
    var keys = event.detail.keyboard,input_money = this.data.input_money.toString(),len = input_money.length;
    switch (keys) {
      case '.':
        if (len < 11 && input_money.indexOf('.') == -1) {
          if (input_money.length < 1) {
            input_money = '0.';
          } else {
            input_money += '.';
          }
        }
        break;
      case 'backspace':
        input_money = input_money.substr(0,input_money.length - 1);
        break;
    default:
      let Index = input_money.indexOf('.');
      if (Index == -1 || len - Index != 3) {
        if (len < 11) {
          input_money += keys;
        }
      }
      break
    }
    this.setData({
      input_money:input_money,
    });
  }