hookehuyr

fix 数字输入控件新增边框,调整输入键盘弹出高度

......@@ -18,14 +18,14 @@
:rules="item.rules"
:required="item.component_props.required"
readonly
@touchstart.stop="showKeyboard"
@touchstart.stop="showKeyboard($event)"
:border="false"
>
</van-field>
<van-number-keyboard
v-model="item.value"
:show="showInteger"
@blur="showInteger = false"
@blur="blurKeyboard()"
@input="onInput"
@delete="onDelete"
/>
......@@ -35,7 +35,7 @@
theme="custom"
extra-key="."
close-button-text="完成"
@blur="showDecimal = false"
@blur="blurKeyboard()"
@input="onInput"
@delete="onDelete"
/>
......@@ -47,7 +47,7 @@ const props = defineProps({
item: Object,
});
const showKeyboard = () => {
const showKeyboard = (e) => {
if (props.item.component_props.type === "decimal") {
// 显示小数键盘
showDecimal.value = true;
......@@ -55,6 +55,24 @@ const showKeyboard = () => {
// 显示整数键盘
showInteger.value = true;
}
// 键盘上移动
const height =
window.innerHeight -
e.target.getBoundingClientRect().y +
e.target.getBoundingClientRect().height +
244;
document.body.style.paddingBottom = height + "px";
document.documentElement.scrollTop = height;
};
const blurKeyboard = () => {
if (props.item.component_props.type === "decimal") {
// 显示小数键盘
showDecimal.value = false;
} else {
// 显示整数键盘
showInteger.value = false;
}
document.body.style.paddingBottom = "0";
};
const showDecimal = ref(false);
......@@ -95,4 +113,10 @@ const onDelete = () => {};
}
}
}
:deep(.van-cell__value) {
border: 1px solid #eaeaea;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
}
</style>
......