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