feat: 手机号位数限制修改

src/components/login/LoginView.vue

@@ -18,7 +18,6 @@
             v-model="phoneNum"
             class="phone-input"
             type="number"
-            maxlength="11"
             placeholder="请输入手机号"
             @blur="verify('phone')"
           ></ElInput>
@@ -63,7 +62,6 @@
             v-model="phoneNum"
             class="phone-input"
             type="number"
-            maxlength="11"
             placeholder="请输入手机号"
             @blur="verify('phone')"
           />
@@ -107,7 +105,6 @@
             v-model="phoneNum"
             class="phone-input"
             type="number"
-            maxlength="11"
             placeholder="请输入手机号"
             @blur="verify('phone')"
           ></ElInput>
@@ -158,7 +155,6 @@
           <ElInput
             v-model="phoneNum"
             class="phone-input"
-            maxlength="11"
             type="number"
             placeholder="请输入手机号"
             @blur="verify('phone')"
@@ -214,7 +210,7 @@ import { useLoginModal } from './login.ts';
 
 const appStore = useAppStore();
 // const emit = defineEmits(['close']);
-const phoneNum = ref<number | null>();
+const phoneNum = ref<string | null>('');
 const verifyCode = ref<number | null>();
 const errorMsg = ref<string | null>();
 const password = ref<string | null>(null);
@@ -252,6 +248,17 @@ watch(
   },
 );
 
+/** type number的maxlength无效，在此限制位数 */
+watch(phoneNum, (val, oldVal) => {
+  if (val && val?.length > 11) {
+    if (oldVal?.length === 11) {
+      phoneNum.value = oldVal;
+    } else {
+      phoneNum.value = val.substring(0, 11);
+    }
+  }
+});
+
 let requestFn: any = null;
 
 const request = (url: any) => {