Showing
4 changed files
with
39 additions
and
25 deletions
| ... | @@ -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> | ... | ... |
-
Please register or login to post a comment