🐛 fix(verify-code): 修复输入处理并优化 APP 端样式层级

- 兼容多端事件对象,从 detail.value 或 target.value 中安全取值
- 过滤非数字字符并按 size 截断,避免非法输入与
This commit is contained in:
Yer11214
2026-09-20 15:26:13 +08:00
parent 30ce901137
commit 42e9b7c15f

View File

@@ -167,7 +167,8 @@ function getCodeCursorLeft() {
// 输入框输入变化的回调 // 输入框输入变化的回调
function handleInput(e: any) { function handleInput(e: any) {
const value = e.detail.value const inputValue = e?.detail?.value ?? e?.target?.value ?? ''
const value = String(inputValue).replace(/\D/g, '').slice(0, props.size)
code.value = value code.value = value
cursorVisible.value = value.length !== props.size cursorVisible.value = value.length !== props.size
emit('update:modelValue', value) emit('update:modelValue', value)
@@ -270,13 +271,30 @@ function codeFormat(val: string | undefined, isPassword: boolean): string {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
font-size:52rpx; z-index: 1;
color: #333;
font-size: 52rpx;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
} }
} }
} }
/* #ifdef APP-PLUS */
/* APP 中让自绘验证码位于透明输入框上方;点击仍由 input-ground 触发聚焦。 */
.xt__input {
z-index: 1;
}
.xt__input-ground {
z-index: 2;
}
.xt__cursor {
z-index: 3;
}
/* #endif */
@keyframes cursor { @keyframes cursor {
0% { 0% {
opacity: 1; opacity: 1;