dcloudio / dcloudio/uni-app

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

Open
#4,291 10 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

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

**复现步骤**
```html

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)









{{ amount }}

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

**实际结果**
![image](https://user-images.githubusercontent.com/56298365/233963519-ec846cf8-8252-4841-91f7-3919fa96bebf.png)

**系统信息:**
- 发行平台: [如 微信小程序]

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.