risenstars/iot-manage-dashboard
2
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: 锁屏和解锁密码输入框自动聚焦

Browse Source
This commit is contained in:
zoumingjun 2025-10-18 20:54:45 +08:00
parent 32051e9ca0
commit 4e264c503a
2 changed files with 38 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
View File

@ -27,29 +27,30 @@ const emit = defineEmits<{
submit: [Recordable<any>];
}>();
const [Form, { resetForm, validate, getValues }] = useVbenForm(
reactive({
commonConfig: {
hideLabel: true,
hideRequiredMark: true,
},
schema: computed(() => [
{
component: 'VbenInputPassword' as const,
componentProps: {
placeholder: $t('ui.widgets.lockScreen.placeholder'),
},
fieldName: 'lockScreenPassword',
formFieldProps: { validateOnBlur: false },
label: $t('authentication.password'),
rules: z
.string()
.min(1, { message: $t('ui.widgets.lockScreen.placeholder') }),
const [Form, { resetForm, validate, getValues, getFieldComponentRef }] =
useVbenForm(
reactive({
commonConfig: {
hideLabel: true,
hideRequiredMark: true,
},
]),
showDefaultActions: false,
}),
);
schema: computed(() => [
{
component: 'VbenInputPassword' as const,
componentProps: {
placeholder: $t('ui.widgets.lockScreen.placeholder'),
},
fieldName: 'lockScreenPassword',
formFieldProps: { validateOnBlur: false },
label: $t('authentication.password'),
rules: z
.string()
.min(1, { message: $t('ui.widgets.lockScreen.placeholder') }),
},
]),
showDefaultActions: false,
}),
);
const [Modal] = useVbenModal({
onConfirm() {
@ -60,6 +61,13 @@ const [Modal] = useVbenModal({
resetForm();
}
},
onOpened() {
requestAnimationFrame(() => {
getFieldComponentRef('lockScreenPassword')
?.$el?.querySelector('[name="lockScreenPassword"]')
?.focus();
});
},
});
async function handleSubmit() {

9
packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
View File

@ -37,7 +37,7 @@ const date = useDateFormat(now, 'YYYY-MM-DD dddd', { locales: locale.value });
const showUnlockForm = ref(false);
const { lockScreenPassword } = storeToRefs(accessStore);
const [Form, { form, validate }] = useVbenForm(
const [Form, { form, validate, getFieldComponentRef }] = useVbenForm(
reactive({
commonConfig: {
hideLabel: true,
@ -75,6 +75,13 @@ async function handleSubmit() {
function toggleUnlockForm() {
showUnlockForm.value = !showUnlockForm.value;
if (showUnlockForm.value) {
requestAnimationFrame(() => {
getFieldComponentRef('password')
?.$el?.querySelector('[name="password"]')
?.focus();
});
}
}
useScrollLock();