perf: 登录组件添加enter键触发提交,锁屏组件自动聚焦输入框

src/components/UserInfo/src/components/LockDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from '@/hooks/web/useI18n'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { Dialog } from '@/components/Dialog'
 import { Form } from '@/components/Form'
 import { useForm } from '@/hooks/web/useForm'
@@ -35,6 +35,20 @@ const dialogVisible = computed({
   }
 })
 
+//  自动聚焦输入框
+watch(
+  dialogVisible,
+  async (val) => {
+    if (val) {
+      const formExposeInput = await getComponentExpose('password')
+      setTimeout(() => {
+        formExposeInput?.focus()
+      }, 10)
+    }
+  },
+  { immediate: true }
+)
+
 const dialogTitle = ref(t('lock.lockScreen'))
 
 const rules = reactive({
@@ -48,14 +62,20 @@ const schema: FormSchema[] = reactive([
     component: 'Input',
     componentProps: {
       type: 'password',
-      showPassword: true
+      showPassword: true,
+      // 按下enter键触发登录
+      onKeydown: (_e: any) => {
+        if (_e.key === 'Enter') {
+          handleLock()
+        }
+      }
     }
   }
 ])
 
 const { formRegister, formMethods } = useForm()
 
-const { getFormData, getElFormExpose } = formMethods
+const { getFormData, getElFormExpose, getComponentExpose } = formMethods
 
 const handleLock = async () => {
   const formExpose = await getElFormExpose()

src/components/UserInfo/src/components/LockPage.vue

@@ -59,8 +59,15 @@ async function goLogin() {
   }
 }
 
+const passwordInputRef = ref<ComponentRef<typeof ElInput>>()
+
 function handleShowForm(show = false) {
   showDate.value = show
+  if (!show) {
+    requestAnimationFrame(() => {
+      passwordInputRef.value?.focus()
+    })
+  }
 }
 </script>
 
@@ -102,6 +109,8 @@ function handleShowForm(show = false) {
             :placeholder="t('lock.placeholder')"
             class="enter-x"
             v-model="password"
+            @keydown.enter="unLock"
+            ref="passwordInputRef"
           />
           <span :class="`text-14px ${prefixCls}-entry__err-msg enter-x`" v-if="errMsg">
             {{ t('lock.message') }}

src/views/Login/components/LoginForm.vue

@@ -72,7 +72,13 @@ const schema = reactive<FormSchema[]>([
       style: {
         width: '100%'
       },
-      placeholder: 'admin or test'
+      placeholder: 'admin or test',
+      // 按下enter键触发登录
+      onKeydown: (_e: any) => {
+        if (_e.key === 'Enter') {
+          signIn()
+        }
+      }
     }
   },
   {