hookehuyr

fix 适配键盘高度优化

...@@ -85,7 +85,7 @@ onMounted(async () => { ...@@ -85,7 +85,7 @@ onMounted(async () => {
85 html, 85 html,
86 body { 86 body {
87 width: 100%; 87 width: 100%;
88 - height: 100%; 88 + // height: 100%;
89 color: @base-font-color; 89 color: @base-font-color;
90 // background-color: #f7f8fa; 90 // background-color: #f7f8fa;
91 // background-color: #fff9ef; 91 // background-color: #fff9ef;
......
...@@ -35,6 +35,8 @@ ...@@ -35,6 +35,8 @@
35 </template> 35 </template>
36 36
37 <script setup> 37 <script setup>
38 +import $ from "jquery";
39 +
38 const props = defineProps({ 40 const props = defineProps({
39 item: Object, 41 item: Object,
40 }); 42 });
...@@ -45,20 +47,18 @@ const openKeyboard = (e) => { ...@@ -45,20 +47,18 @@ const openKeyboard = (e) => {
45 show.value = true; 47 show.value = true;
46 // 键盘上移动 48 // 键盘上移动
47 const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度 49 const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
50 + const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
48 let scroll_height = ""; 51 let scroll_height = "";
49 - if (target_to_view_height < 244) { 52 + if (target_top < 244) {
50 - scroll_height = 53 + document.getElementById("app").style.paddingBottom = "244px";
51 - window.innerHeight - 54 + window.scrollTo(0, $("#app").height());
52 - e.target.getBoundingClientRect().y - 55 + } else {
53 - e.target.getBoundingClientRect().height + 56 + document.documentElement.scrollTop = 400;
54 - 244;
55 - document.body.style.paddingBottom = scroll_height + "px";
56 - document.documentElement.scrollTop = scroll_height;
57 } 57 }
58 }; 58 };
59 const blurKeyboard = () => { 59 const blurKeyboard = () => {
60 show.value = false; 60 show.value = false;
61 - document.body.style.paddingBottom = "0"; 61 + document.getElementById("app").style.paddingBottom = "0";
62 }; 62 };
63 63
64 // 校验函数返回 true 表示校验通过,false 表示不通过 64 // 校验函数返回 true 表示校验通过,false 表示不通过
......
...@@ -43,6 +43,8 @@ ...@@ -43,6 +43,8 @@
43 </template> 43 </template>
44 44
45 <script setup> 45 <script setup>
46 +import $ from "jquery";
47 +
46 const props = defineProps({ 48 const props = defineProps({
47 item: Object, 49 item: Object,
48 }); 50 });
...@@ -56,16 +58,14 @@ const showKeyboard = (e) => { ...@@ -56,16 +58,14 @@ const showKeyboard = (e) => {
56 showInteger.value = true; 58 showInteger.value = true;
57 } 59 }
58 // 键盘上移动 60 // 键盘上移动
59 - const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度 61 + // const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
62 + const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
60 let scroll_height = ""; 63 let scroll_height = "";
61 - if (target_to_view_height < 244) { 64 + document.getElementById("app").style.paddingBottom = "244px";
62 - scroll_height = 65 + if (target_top < 244) {
63 - window.innerHeight - 66 + window.scrollTo(0, $("#app").height());
64 - e.target.getBoundingClientRect().y - 67 + } else {
65 - e.target.getBoundingClientRect().height + 68 + document.documentElement.scrollTop = 400;
66 - 244;
67 - document.body.style.paddingBottom = scroll_height + "px";
68 - document.documentElement.scrollTop = scroll_height;
69 } 69 }
70 }; 70 };
71 const blurKeyboard = () => { 71 const blurKeyboard = () => {
...@@ -76,7 +76,7 @@ const blurKeyboard = () => { ...@@ -76,7 +76,7 @@ const blurKeyboard = () => {
76 // 显示整数键盘 76 // 显示整数键盘
77 showInteger.value = false; 77 showInteger.value = false;
78 } 78 }
79 - document.body.style.paddingBottom = "0"; 79 + document.getElementById("app").style.paddingBottom = "0";
80 }; 80 };
81 81
82 const showDecimal = ref(false); 82 const showDecimal = ref(false);
......
...@@ -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="openKeyboard()" 23 + @touchstart.stop="openKeyboard($event)"
24 :border="false" 24 :border="false"
25 > 25 >
26 </van-field> 26 </van-field>
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
35 35
36 <script setup> 36 <script setup>
37 import { wxInfo } from "@/utils/tools"; 37 import { wxInfo } from "@/utils/tools";
38 +import $ from "jquery";
38 39
39 const props = defineProps({ 40 const props = defineProps({
40 item: Object, 41 item: Object,
...@@ -64,15 +65,22 @@ const rules = [{ validator, message: validatorMessage }]; ...@@ -64,15 +65,22 @@ const rules = [{ validator, message: validatorMessage }];
64 65
65 const show = ref(false); 66 const show = ref(false);
66 67
67 -const openKeyboard = () => { 68 +const openKeyboard = (e) => {
68 show.value = true; 69 show.value = true;
69 // 键盘上移动 70 // 键盘上移动
70 - document.body.style.paddingBottom = "100px"; 71 + const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
71 - document.documentElement.scrollTop = 100; 72 + const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
73 + let scroll_height = "";
74 + if (target_top < 244) {
75 + document.getElementById("app").style.paddingBottom = "244px";
76 + window.scrollTo(0, $("#app").height());
77 + } else {
78 + document.documentElement.scrollTop = 400;
79 + }
72 }; 80 };
73 const blurKeyboard = () => { 81 const blurKeyboard = () => {
74 show.value = false; 82 show.value = false;
75 - document.body.style.paddingBottom = "0"; 83 + document.getElementById("app").style.paddingBottom = "0";
76 }; 84 };
77 </script> 85 </script>
78 86
...@@ -87,4 +95,10 @@ const blurKeyboard = () => { ...@@ -87,4 +95,10 @@ const blurKeyboard = () => {
87 } 95 }
88 } 96 }
89 } 97 }
98 +
99 +:deep(.van-cell__value) {
100 + border: 1px solid #eaeaea;
101 + border-radius: 0.25rem;
102 + padding: 0.25rem 0.5rem;
103 +}
90 </style> 104 </style>
......