hookehuyr

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

...@@ -18,14 +18,14 @@ ...@@ -18,14 +18,14 @@
18 :rules="item.rules" 18 :rules="item.rules"
19 :required="item.component_props.required" 19 :required="item.component_props.required"
20 readonly 20 readonly
21 - @touchstart.stop="showKeyboard" 21 + @touchstart.stop="showKeyboard($event)"
22 :border="false" 22 :border="false"
23 > 23 >
24 </van-field> 24 </van-field>
25 <van-number-keyboard 25 <van-number-keyboard
26 v-model="item.value" 26 v-model="item.value"
27 :show="showInteger" 27 :show="showInteger"
28 - @blur="showInteger = false" 28 + @blur="blurKeyboard()"
29 @input="onInput" 29 @input="onInput"
30 @delete="onDelete" 30 @delete="onDelete"
31 /> 31 />
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
35 theme="custom" 35 theme="custom"
36 extra-key="." 36 extra-key="."
37 close-button-text="完成" 37 close-button-text="完成"
38 - @blur="showDecimal = false" 38 + @blur="blurKeyboard()"
39 @input="onInput" 39 @input="onInput"
40 @delete="onDelete" 40 @delete="onDelete"
41 /> 41 />
...@@ -47,7 +47,7 @@ const props = defineProps({ ...@@ -47,7 +47,7 @@ const props = defineProps({
47 item: Object, 47 item: Object,
48 }); 48 });
49 49
50 -const showKeyboard = () => { 50 +const showKeyboard = (e) => {
51 if (props.item.component_props.type === "decimal") { 51 if (props.item.component_props.type === "decimal") {
52 // 显示小数键盘 52 // 显示小数键盘
53 showDecimal.value = true; 53 showDecimal.value = true;
...@@ -55,6 +55,24 @@ const showKeyboard = () => { ...@@ -55,6 +55,24 @@ const showKeyboard = () => {
55 // 显示整数键盘 55 // 显示整数键盘
56 showInteger.value = true; 56 showInteger.value = true;
57 } 57 }
58 + // 键盘上移动
59 + const height =
60 + window.innerHeight -
61 + e.target.getBoundingClientRect().y +
62 + e.target.getBoundingClientRect().height +
63 + 244;
64 + document.body.style.paddingBottom = height + "px";
65 + document.documentElement.scrollTop = height;
66 +};
67 +const blurKeyboard = () => {
68 + if (props.item.component_props.type === "decimal") {
69 + // 显示小数键盘
70 + showDecimal.value = false;
71 + } else {
72 + // 显示整数键盘
73 + showInteger.value = false;
74 + }
75 + document.body.style.paddingBottom = "0";
58 }; 76 };
59 77
60 const showDecimal = ref(false); 78 const showDecimal = ref(false);
...@@ -95,4 +113,10 @@ const onDelete = () => {}; ...@@ -95,4 +113,10 @@ const onDelete = () => {};
95 } 113 }
96 } 114 }
97 } 115 }
116 +
117 +:deep(.van-cell__value) {
118 + border: 1px solid #eaeaea;
119 + border-radius: 0.25rem;
120 + padding: 0.25rem 0.5rem;
121 +}
98 </style> 122 </style>
......