微信小程序数字键盘（仿微信转账键盘）

微信小程序input自带数字输入键盘，不过是直接调用的系统键盘，无法个性化。

代码中使用使用了Vant WeappVant UI小程序版，这里就不介绍相关安装说明了，大家自行安装Vant Weapp。

json 用到的组件

javascript 复制代码

{
  "usingComponents": {
    "van-cell": "@vant/weapp/cell/index",
    "van-button": "@vant/weapp/button/index",
    "van-popup": "@vant/weapp/popup/index",
    "van-field": "@vant/weapp/field/index",
    "van-row": "@vant/weapp/row/index",
    "van-col": "@vant/weapp/col/index"
  }
}

wxml 结构

html 复制代码

<van-cell title="分数" value="{{score || '点击打分'}}" bindtap="tapScore" />

<!-- 打分键盘 -->
<van-popup
  show="{{ keyboardShow }}"
  position="bottom"
  custom-style="height: 508rpx;"
  bind:close="onClose"
>
  <view class="keyborad">
    <view class="input">
      <van-field
        value="{{ value }}"
        custom-style="border: 2prx solid #dcdee0"
        placeholder="请选择分数"
        disabled
      />
    </view>
    <view class="number-keyboard">
      <van-row class="number" gutter="10">
        <van-col
          wx:for="{{number}}"
          wx:key="index"
          data-key="{{item}}"
          custom-class="number-item"
          span="{{item === 0 ? '16' : '8'}}"
          bindtap="tapNumber">
          <view class="number-item__key tap-key">{{item}}</view>
        </van-col>
      </van-row>
      <view class="operation">
        <view class="del tap-key" bindtap="tapBksp">
          <image class="del-icon" src="/assets/backspace.png"></image>
        </view>
        <view class="confirm tap-key" bindtap="confirm">确定</view>
      </view>
    </view>
  </view>
</van-popup>

js 内容

javascript 复制代码

Page({
  data: {
    score: '',
    keyboardShow: false,
    value: '',
    number: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.']
  },
  tapScore() {
    this.setData({
      keyboardShow: true
    })
  },
  onClose() {
    this.setData({
      keyboardShow: false
    })
  },
  // number点击
  tapNumber(e) {
    const { key } = e.currentTarget.dataset
    let { value } = this.data
    value += key
    /**
     * 限制输入
     * 开头不能是小数点
     * 只能有一位小数点
     * 0开头只能跟小数点
     * 小数点后限制一位
     */
    value = String(value)
            .replace(/^\./g, '')
            .replace('.', '$#$')
            .replace(/\./g, '')
            .replace('$#$', '.')
            .replace(/^00$/, '0')
            .replace(/^0(\d)/g, '$1')
            .replace(/^(-)*(\d+)\.(\d{1}).*$/, '$1$2.$3')

    this.setData({
      value
    })
  },
  // 退格
  tapBksp() {
    let { value } = this.data
    value = String(value)
    value = value.substr(0, value.length - 1)
    this.setData({
      value
    })
  },
  // 确定
  confirm() {
    let { value } = this.data
    this.setData({
      score: value,
      keyboardShow: false
    })
  },
})

wxss 样式

css 复制代码

.keyborad .number-keyboard {
  display: flex;
  background-color: #ebedf0;
  padding: 20rpx 20rpx 0 20rpx;
}
.keyborad .number-keyboard .tap-key:active {
  opacity: 0.8;
}
.keyborad .number-keyboard .number {
  flex: 1;
}
.keyborad .number-keyboard .number .number-item {
  margin-bottom: 20rpx;
}
.keyborad .number-keyboard .number .number-item .number-item__key {
  background-color: #fff;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-weight: 700;
}
.keyborad .number-keyboard .operation {
  width: 200rpx;
  display: flex;
  flex-direction: column;
  margin: 0 0 20rpx 20rpx;
}
.keyborad .number-keyboard .operation .del {
  height: 80rpx;
  text-align: center;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keyborad .number-keyboard .operation .del .del-icon {
  width: 40rpx;
  height: 40rpx;
}
.keyborad .number-keyboard .operation .confirm {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #04943f;
  border-radius: 8rpx;
  color: #fff;
  font-size: 36rpx;
}
.keyborad .van-field__control--disabled {
  color: #666 !important;
}