微信支付红包的金额输入框是专门做了一个键盘吗？

有大神能给出谋划策吗，现在小程序开发，领导希望要一个跟微信红包的金额输入框完全一样的input框，领导有俩要求

1.金额输入框有值的时候前面要紧跟一个“￥”符号，并且根据输入长度进行整体居中

2.键盘就是带小数点的数字键盘

现在采用了两种方案，都失败了

方案一：因为不会动态的居中，就把 “￥”符号放在输入框里面了，做完上真机发现问题，digit 类型input框在获取焦点时会把“￥”符号给过滤掉，失去焦点的时候才会把“￥”显示出来，造成“￥”无法一直显示

<van-row>

  <van-col span="24">

    <input style="background: #F3F3F3;border-radius: 10px;height: 80rpx;margin-top: 19rpx;" name="arriveMoney" type="digit" placeholder="请输入充值金额" value="{{ arriveMoneyInput }}" maxlength="8" bindinput="moneyInput"     bindfocus="moneyFocus"/>

  </van-col>

</van-row>

<van-row>

  <van-col span="24">

      <input value="{{ arriveMoneyShow }}" maxlength="11"readonly/>

  </van-col>

</van-row>

js代码

  moneyInput(e) {

    let arriveMoneyInput = e.detail.value

    if(arriveMoneyInput == '￥') {

      this.setData({ arriveMoneyInput: '' })

      this.setData({ arriveMoneyShow: '￥0.00' })

      return

    }

    if(arriveMoneyInput == '.') {

      this.setData({ arriveMoneyInput: '￥0.' })

      this.setData({ arriveMoneyShow: '￥0.00' })

      return

    }

    arriveMoneyInput = arriveMoneyInput.replace('￥', '')

    const exp = /(^[1-9]([0-9]+)?(\.[0-9]{0,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]{0,2}$)/;

    if(exp.test(arriveMoneyInput)) {

      let arr = arriveMoneyInput.split('.')

      this.setData({ arriveMoneyShow: '￥' + arr[0] + '.' + (!arr[1] ? '00' : arr[1].length == 1 ? (arr[1] + '0') : arr[1]) })

      arriveMoneyInput = '￥' + arriveMoneyInput

      this.setData({ arriveMoneyInput })

    } else {

      this.setData({ arriveMoneyInput: this.data.arriveMoneyInput })

    }

    console.log('this.data.arriveMoneyInput', this.data.arriveMoneyInput)

  },

方案二：也考虑过把“￥”符号单独放一个view里面，可是遇到了新的问题，不会实现根据input框输入长度动态进行 “￥”符号与输入框内数字整体的一个居中

<view style="display: flex;align-items: center;justify-content: center;margin-top: 18rpx;background: #F3F3F3;border-radius: 10px;height: 80rpx;">

  <view style="line-height: 80rpx;font-size: 40rpx;text-align: right;">￥</view>

  <input style="text-align: left;white-space: nowrap;overflow-x: hidden;display: inline-block;max-width: 100%;" name="arriveMoney" type="digit" placeholder="请输入充值金额" value="{{ arriveMoney }}" bindblur="formatMoney" maxlength="7"/>

</view>

js代码

  formatMoney(e) {

    let arriveMoney = e.detail.value

    if(!arriveMoney) {

      return

    }

    try {

      const exp = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;

      if(!arriveMoney || arriveMoney == '0.0' || arriveMoney == '0.00' || arriveMoney <= 0 || !exp.test(arriveMoney)) {

        arriveMoney = ''

        util.showToastNone('请输入正确的充值金额，最多精确到分')

      }

    } catch (error) {

      arriveMoney = ''

    } finally {

      this.setData({

        arriveMoney

      })

    }

  },