[feat][添加输入键盘]

src/views/xjc-integratedmachine/login/student_login.vue

@@ -18,6 +18,7 @@
                         auto-complete="off"
                         placeholder="身份证号"
                         class="form-box-input1"
+                        @focus="focusUsernameKeyboard"
                     >
                       <template #prefix>
                         <svg-icon icon-class="user_login" class="el-input__icon input-icon"/>
@@ -34,6 +35,7 @@
                         show-password
                         class="form-box-input1"
                         @keyup.enter="handleLogin"
+                        @focus="focusPasswordKeyboard"
                     >
                       <template #prefix>
                         <svg-icon icon-class="password_login" class="el-input__icon input-icon"/>
@@ -64,7 +66,20 @@
           </div>
         </div>
       </div>
-
+      <UsernameKeyboard
+              v-if="showUsernameKeyboard"
+              :input="loginForm.username"
+              @onChange="handleUsernameKeyboardInputChange"
+              @onKeyPress="handleUsernameKeyboardKeyPress"
+              @onClose="showUsernameKeyboard = false"
+      />
+      <PasswordKeyboard
+              v-if="showPasswordKeyboard"
+              :input="loginForm.password"
+              @onChange="handlePasswordKeyboardInputChange"
+              @onKeyPress="handlePasswordKeyboardKeyPress"
+              @onClose="showPasswordKeyboard = false"
+      />
     </div>
 </template>
 
@@ -73,6 +88,10 @@
     import useUserStore from '@/store/modules/user'
     import { setToken } from '@/utils/auth'
     import HeadComponent from '@/views/xjc-integratedmachine/components/head_component.vue';
+    import UsernameKeyboard from '@/views/xjc-integratedmachine/components/xjc_keyboard.vue'
+    import PasswordKeyboard from '@/views/xjc-integratedmachine/components/xjc_keyboard.vue'
+    import {ref} from "vue";
+
     const userStore = useUserStore()
 
     const {proxy} = getCurrentInstance()
@@ -100,6 +119,39 @@
         password: [{required: true, trigger: "blur", message: "请输入您的密码"}],
     }
 
+    /* 软键盘事件 ↓*/
+    // 启动软键盘标识
+    const showUsernameKeyboard = ref(false)
+    function focusUsernameKeyboard(){
+      showUsernameKeyboard.value = true
+      showPasswordKeyboard.value = false
+    }
+    function handleUsernameKeyboardInputChange(input) {
+        loginForm.value.username = input
+    }
+    function handleUsernameKeyboardKeyPress(button) {
+      if(button === '{enter}'){
+        showUsernameKeyboard.value = false
+      }
+    }
+
+    const showPasswordKeyboard = ref(false)
+    function focusPasswordKeyboard(){
+      showUsernameKeyboard.value = false
+      showPasswordKeyboard.value = true
+    }
+    function handlePasswordKeyboardInputChange(input) {
+        loginForm.value.password = input
+    }
+    function handlePasswordKeyboardKeyPress(button) {
+      if(button === '{enter}'){
+        showPasswordKeyboard.value = false
+      }
+    }
+
+    /* 软键盘事件 ↑*/
+
+    // 登录
     function handleLogin() {
         proxy.$refs.loginRef.validate(valid => {
             if (valid) {