mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-09-20 20:02:02 +08:00
🐛 fix(verify-code): 修复输入处理并优化 APP 端样式层级
- 兼容多端事件对象,从 detail.value 或 target.value 中安全取值 - 过滤非数字字符并按 size 截断,避免非法输入与
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user