Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c9cf4867 1 parent e89d449d

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

Inline Side-by-side
Showing 2 changed files with 28 additions and 5 deletions
1 <!-- 1 <!--
2 * @Date: 2022-09-14 14:44:30 2 * @Date: 2022-09-14 14:44:30
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-11-21 14:49:52 4 + * @LastEditTime: 2022-11-21 16:00:36
5 * @FilePath: /data-table/src/components/IdentityField/index.vue 5 * @FilePath: /data-table/src/components/IdentityField/index.vue
6 * @Description: 身份证输入控件 6 * @Description: 身份证输入控件
7 --> 7 -->
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
18 :rules="rules" 18 :rules="rules"
19 :required="item.component_props.required" 19 :required="item.component_props.required"
20 readonly 20 readonly
21 - @touchstart.stop="show = true" 21 + @touchstart.stop="openKeyboard()"
22 :border="false" 22 :border="false"
23 > 23 >
24 </van-field> 24 </van-field>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
27 :show="show" 27 :show="show"
28 extra-key="X" 28 extra-key="X"
29 close-button-text="完成" 29 close-button-text="完成"
30 - @blur="show = false" 30 + @blur="blurKeyboard()"
31 @input="onInput" 31 @input="onInput"
32 @delete="onDelete" 32 @delete="onDelete"
33 /> 33 />
...@@ -41,9 +41,21 @@ const props = defineProps({ ...@@ -41,9 +41,21 @@ const props = defineProps({
41 41
42 const show = ref(false); 42 const show = ref(false);
43 43
44 +const openKeyboard = () => {
45 + show.value = true;
46 + // 键盘上移动
47 + document.body.style.paddingBottom = "100px";
48 + document.documentElement.scrollTop = 100;
49 +};
50 +const blurKeyboard = () => {
51 + show.value = false;
52 + document.body.style.paddingBottom = "0";
53 +};
54 +
44 // 校验函数返回 true 表示校验通过，false 表示不通过 55 // 校验函数返回 true 表示校验通过，false 表示不通过
45 // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 56 // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
46 const validator = (val) => { 57 const validator = (val) => {
58 + console.warn(props.item.component_props.required);
47 if (!props.item.component_props.required) { 59 if (!props.item.component_props.required) {
48 // 非必填 60 // 非必填
49 return true; 61 return true;
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 :rules="rules" 20 :rules="rules"
21 :required="item.component_props.required" 21 :required="item.component_props.required"
22 :readonly="readonly" 22 :readonly="readonly"
23 - @touchstart.stop="show = true" 23 + @touchstart.stop="openKeyboard()"
24 :border="false" 24 :border="false"
25 > 25 >
26 </van-field> 26 </van-field>
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 v-model="item.value" 28 v-model="item.value"
29 :show="show" 29 :show="show"
30 :maxlength="11" 30 :maxlength="11"
31 - @blur="show = false" 31 + @blur="blurKeyboard()"
32 /> 32 />
33 </div> 33 </div>
34 </template> 34 </template>
...@@ -63,6 +63,17 @@ const validatorMessage = (val, rule) => { ...@@ -63,6 +63,17 @@ const validatorMessage = (val, rule) => {
63 const rules = [{ validator, message: validatorMessage }]; 63 const rules = [{ validator, message: validatorMessage }];
64 64
65 const show = ref(false); 65 const show = ref(false);
66 +
67 +const openKeyboard = () => {
68 + show.value = true;
69 + // 键盘上移动
70 + document.body.style.paddingBottom = "100px";
71 + document.documentElement.scrollTop = 100;
72 +};
73 +const blurKeyboard = () => {
74 + show.value = false;
75 + document.body.style.paddingBottom = "0";
76 +};
66 </script> 77 </script>
67 78
68 <style lang="less" scoped> 79 <style lang="less" scoped>
......