|
@@ -1,13 +1,17 @@
|
|
|
<template>
|
|
|
- <uni-popup type="top" background-color="#fff" ref="fillRef">
|
|
|
+ <uni-popup type="bottom" background-color="#fff" ref="fillRef" class="FillPopup" :animation="false">
|
|
|
<view class="popup-content">
|
|
|
- <input v-model.trim="result" :focus="true" placeholder="请输入答案" @blur="onBlur" @confirm="handleConfirm" class="my-textarea" type="text" />
|
|
|
+ <input v-model.trim="result" @close="handleClose" :focus="true" placeholder="请输入答案" adjust-position="auto" style="position: z-index: 10;"
|
|
|
+ @blur="onBlur" @confirm="handleConfirm" class="my-textarea" type="text" />
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import {ref, watch} from "vue";
|
|
|
+ import {
|
|
|
+ ref,
|
|
|
+ watch
|
|
|
+ } from "vue";
|
|
|
const fillRef = ref(null);
|
|
|
const result = ref('');
|
|
|
const focus = ref(false);
|
|
@@ -25,35 +29,50 @@
|
|
|
watch(() => props.value, (val) => {
|
|
|
result.value = val;
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
+ function handleClose() {
|
|
|
+ focus.value = false;
|
|
|
+ }
|
|
|
+
|
|
|
function showPopup() {
|
|
|
- fillRef.value && fillRef.value.open();
|
|
|
- }
|
|
|
|
|
|
+ focus.value = true;
|
|
|
+ fillRef.value && fillRef.value.open();
|
|
|
+ }
|
|
|
+
|
|
|
function handleConfirm() {
|
|
|
- fillRef.value && fillRef.value.close();
|
|
|
+ fillRef.value && fillRef.value.close();
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
function onBlur() {
|
|
|
- emits("blur", {result: result.value,index: props.index});
|
|
|
+ emits("blur", {
|
|
|
+ result: result.value,
|
|
|
+ index: props.index
|
|
|
+ });
|
|
|
focus.value = false;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
uni.$on("swiper-change", () => {
|
|
|
- emits("blur", {result: result.value,index: props.index});
|
|
|
+ emits("blur", {
|
|
|
+ result: result.value,
|
|
|
+ index: props.index
|
|
|
+ });
|
|
|
fillRef.value && fillRef.value.close()
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
defineExpose({
|
|
|
showPopup
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.popup-content {
|
|
|
- padding: 20px;
|
|
|
-}
|
|
|
-.my-textarea {
|
|
|
- height: 36px;
|
|
|
-}
|
|
|
+ .popup-content {
|
|
|
+ padding-bottom: 20px;
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+ .my-textarea {
|
|
|
+ padding: 0 5px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ }
|
|
|
</style>
|