解决虚拟数字键盘事件和原生焦点冲突

src/pages/register.page.vue

@@ -36,15 +36,17 @@ const Fields: Record<FieldKey, Field> = {
   height: {
     control: {
       label: '身高', placeholder: '请输入身高',
-      type: 'number', min: 1, max: 300, clearable: true,
+      type: 'number', min: 1, max: 300, clearable: true, readonly: true,
     },
+    keyboard: { show: false, title: '身高', extraKey:'.', closeButtonText: '完成' },
     suffix: 'cm',
   },
   weight: {
     control: {
       label: '体重', placeholder: '请输入体重',
-      type: 'number', min: 1, max: 300, clearable: true,
+      type: 'number', min: 1, max: 300, clearable: true, readonly: true,
     },
+    keyboard: { show: false, title: '体重', extraKey:'.', closeButtonText: '完成' },
     suffix: 'kg',
   },
   sex: {
@@ -77,7 +79,7 @@ const Fields: Record<FieldKey, Field> = {
   cardno: {
     control: {
       label: '身份证号', placeholder: '请输入身份证号',
-      type: 'text', maxlength: 18, minlength: 18, clearable: true,
+      type: 'text', maxlength: 18, minlength: 18, clearable: true, readonly: true,
     },
     keyboard: { show: false, title: '身份证号', extraKey: 'X', closeButtonText: '完成' },
     rules: [
@@ -92,7 +94,7 @@ const Fields: Record<FieldKey, Field> = {
   phone: {
     control: {
       label: '手机号码', placeholder: '请输入手机号码',
-      type: 'tel', maxlength: 11, minlength: 11, clearable: true,
+      type: 'tel', maxlength: 11, minlength: 11, clearable: true, readonly: true,
     },
     keyboard: { show: false, title: '手机号码', closeButtonText: '完成' },
     rules: [
@@ -213,6 +215,7 @@ const { send: handle } = useRequest(
                      :class="{'no-border': field.control?.border === false}"
                      :focused="field.keyboard?.show" @focus="field.keyboard && (field.keyboard.show = true)"
                      @blur="field.keyboard && (field.keyboard.show = false)"
+                     :readonly="field.control.readonly" @click="field.keyboard && (field.keyboard.show = true)"
           >
             <template #input v-if="field.component?.name === 'radio'">
               <van-radio-group v-model="modelRef[field.name]" direction="horizontal" shape="dot">