hookehuyr

fix 适配键盘高度优化

......@@ -85,7 +85,7 @@ onMounted(async () => {
html,
body {
width: 100%;
height: 100%;
// height: 100%;
color: @base-font-color;
// background-color: #f7f8fa;
// background-color: #fff9ef;
......
......@@ -35,6 +35,8 @@
</template>
<script setup>
import $ from "jquery";
const props = defineProps({
item: Object,
});
......@@ -45,20 +47,18 @@ const openKeyboard = (e) => {
show.value = true;
// 键盘上移动
const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
let scroll_height = "";
if (target_to_view_height < 244) {
scroll_height =
window.innerHeight -
e.target.getBoundingClientRect().y -
e.target.getBoundingClientRect().height +
244;
document.body.style.paddingBottom = scroll_height + "px";
document.documentElement.scrollTop = scroll_height;
if (target_top < 244) {
document.getElementById("app").style.paddingBottom = "244px";
window.scrollTo(0, $("#app").height());
} else {
document.documentElement.scrollTop = 400;
}
};
const blurKeyboard = () => {
show.value = false;
document.body.style.paddingBottom = "0";
document.getElementById("app").style.paddingBottom = "0";
};
// 校验函数返回 true 表示校验通过,false 表示不通过
......
......@@ -43,6 +43,8 @@
</template>
<script setup>
import $ from "jquery";
const props = defineProps({
item: Object,
});
......@@ -56,16 +58,14 @@ const showKeyboard = (e) => {
showInteger.value = true;
}
// 键盘上移动
const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
// const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
let scroll_height = "";
if (target_to_view_height < 244) {
scroll_height =
window.innerHeight -
e.target.getBoundingClientRect().y -
e.target.getBoundingClientRect().height +
244;
document.body.style.paddingBottom = scroll_height + "px";
document.documentElement.scrollTop = scroll_height;
document.getElementById("app").style.paddingBottom = "244px";
if (target_top < 244) {
window.scrollTo(0, $("#app").height());
} else {
document.documentElement.scrollTop = 400;
}
};
const blurKeyboard = () => {
......@@ -76,7 +76,7 @@ const blurKeyboard = () => {
// 显示整数键盘
showInteger.value = false;
}
document.body.style.paddingBottom = "0";
document.getElementById("app").style.paddingBottom = "0";
};
const showDecimal = ref(false);
......
......@@ -20,7 +20,7 @@
:rules="rules"
:required="item.component_props.required"
:readonly="readonly"
@touchstart.stop="openKeyboard()"
@touchstart.stop="openKeyboard($event)"
:border="false"
>
</van-field>
......@@ -35,6 +35,7 @@
<script setup>
import { wxInfo } from "@/utils/tools";
import $ from "jquery";
const props = defineProps({
item: Object,
......@@ -64,15 +65,22 @@ const rules = [{ validator, message: validatorMessage }];
const show = ref(false);
const openKeyboard = () => {
const openKeyboard = (e) => {
show.value = true;
// 键盘上移动
document.body.style.paddingBottom = "100px";
document.documentElement.scrollTop = 100;
const target_to_view_height = window.innerHeight - e.target.getBoundingClientRect().y; // 元素到适口高度
const target_top = document.body.scrollHeight - $(e.target).offset().top; // 元素到正文高度
let scroll_height = "";
if (target_top < 244) {
document.getElementById("app").style.paddingBottom = "244px";
window.scrollTo(0, $("#app").height());
} else {
document.documentElement.scrollTop = 400;
}
};
const blurKeyboard = () => {
show.value = false;
document.body.style.paddingBottom = "0";
document.getElementById("app").style.paddingBottom = "0";
};
</script>
......@@ -87,4 +95,10 @@ const blurKeyboard = () => {
}
}
}
:deep(.van-cell__value) {
border: 1px solid #eaeaea;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
}
</style>
......