vue3+uniapp+vite+ts项目中使用 customRef时input 输入框双向绑定失效？

likailun101929 commented 1 year ago

问题描述 通过customRef 实现数字输入框最多输入两位小数 vue3+uniapp+vite+ts项目中使用 customRef时input 输入框双向绑定失效!!! 输入显示还是改动之前的数据

复现步骤

<script setup lang="ts">
  function useNumberRef(value) {
    return customRef((track, trigger) => {
      return {
        get() {
          track()
          return value
        },
        set(newValue) {
          let val = newValue || ''
          val = val.replace(/(^\s*)|(\s*$)/g, '')
          if (!val) {
            value = ''
            trigger()
            return value
          }
          val = val.replace(/^0{2,}.*/g, 0)
          val = val.replace(/^0([1,2,3,4,5,6,7,8,9])/g, '$1')
          val = val.replace(/[^\d.]/g, '')
          val = val.replace(/^\./g, '')
          val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
          val = val.replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3')
          value = val
          trigger()
          return value
        },
      }
    })
  }
  const amount = useNumberRef(null)
</script>
<template>
  <view class="recharge">
    <uni-forms>
      <uni-forms-item label="充值数量" name="amount">
        <uni-easyinput type="digit" v-model="amount" placeholder="请输入" />
      </uni-forms-item>
      <!-- <uni-forms-item label="实时金价">
        {{ goldPrice }}
      </uni-forms-item> -->
      <!-- <uni-forms-item label="支付金额"> {{ payMoeny }} </uni-forms-item> -->
    </uni-forms>
    {{ amount }}
  </view>
</template>

预期结果 输入框能双向绑定

实际结果