✨ feat(手机号，身份证控件): 弹出输入框高度问题优化

 <!--
  * @Date: 2022-09-14 14:44:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-21 14:49:52
+ * @LastEditTime: 2022-11-21 16:00:36
  * @FilePath: /data-table/src/components/IdentityField/index.vue
  * @Description: 身份证输入控件
 -->
@@ -18,7 +18,7 @@
       :rules="rules"
       :required="item.component_props.required"
       readonly
-      @touchstart.stop="show = true"
+      @touchstart.stop="openKeyboard()"
       :border="false"
     >
     </van-field>
@@ -27,7 +27,7 @@
       :show="show"
       extra-key="X"
       close-button-text="完成"
-      @blur="show = false"
+      @blur="blurKeyboard()"
       @input="onInput"
       @delete="onDelete"
     />
@@ -41,9 +41,21 @@ const props = defineProps({
 
 const show = ref(false);
 
+const openKeyboard = () => {
+  show.value = true;
+  // 键盘上移动
+  document.body.style.paddingBottom = "100px";
+  document.documentElement.scrollTop = 100;
+};
+const blurKeyboard = () => {
+  show.value = false;
+  document.body.style.paddingBottom = "0";
+};
+
 // 校验函数返回 true 表示校验通过，false 表示不通过
 // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
 const validator = (val) => {
+  console.warn(props.item.component_props.required);
   if (!props.item.component_props.required) {
     // 非必填
     return true;

@@ -20,7 +20,7 @@
       :rules="rules"
       :required="item.component_props.required"
       :readonly="readonly"
-      @touchstart.stop="show = true"
+      @touchstart.stop="openKeyboard()"
       :border="false"
     >
     </van-field>
@@ -28,7 +28,7 @@
       v-model="item.value"
       :show="show"
       :maxlength="11"
-      @blur="show = false"
+      @blur="blurKeyboard()"
     />
   </div>
 </template>
@@ -63,6 +63,17 @@ const validatorMessage = (val, rule) => {
 const rules = [{ validator, message: validatorMessage }];
 
 const show = ref(false);
+
+const openKeyboard = () => {
+  show.value = true;
+  // 键盘上移动
+  document.body.style.paddingBottom = "100px";
+  document.documentElement.scrollTop = 100;
+};
+const blurKeyboard = () => {
+  show.value = false;
+  document.body.style.paddingBottom = "0";
+};
 </script>
 
 <style lang="less" scoped>