mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-14 23:17:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

pin code input supports pressing enter to confirm and pressing tab to switch to the next component

Browse Source
This commit is contained in:
MaysWind
2025-01-04 16:33:33 +08:00
parent af9aa726f4
commit d18e6df1c0
5 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/PinCodeInput.vue
+10 -1
View File
@@ -33,6 +33,7 @@ const props = defineProps<{
length: number;
disabled?: boolean;
autofocus?: boolean;
autoConfirm?: boolean;
secure?: boolean;
}>();
@@ -151,6 +152,14 @@ function onKeydown(index: number, event: KeyboardEvent): void {
return;
}
if (index <= 0 && (event.shiftKey && event.key === 'Tab')) {
return;
}
if (index >= props.length - 1 && (!event.shiftKey && event.key === 'Tab')) {
return;
}
if (event.key === 'Enter' && finalPinCode.value.length === props.length) {
emit('pincode:confirm', finalPinCode.value);
event.preventDefault();
@@ -204,7 +213,7 @@ function onKeydown(index: number, event: KeyboardEvent): void {
setInputType(index);
setNextFocus(index);
if (finalPinCode.value.length === props.length) {
if (props.autoConfirm && finalPinCode.value.length === props.length) {
emit('pincode:confirm', finalPinCode.value);
}
}