uniProject/components/question/FillItem.vue

<template>
	<uni-popup type="top" background-color="#fff" ref="fillRef">
		<view class="popup-content">
			<input  v-model.trim="result" :focus="true" placeholder="请输入答案"  @blur="onBlur" @confirm="handleConfirm" class="my-textarea" type="text" />
		</view>
	</uni-popup>
</template>

<script setup>
	import {ref, watch} from "vue";
	const fillRef = ref(null);
	const result = ref('');
	const focus = ref(false);
	const emits = defineEmits(['blur']);
	const props = defineProps({
		value: {
			type: String,
			default: ''
		},
		index: {
			type: Number,
		}
	})
	
	watch(() => props.value, (val) => {
		result.value = val;
	})
	
	function showPopup() {
    fillRef.value &&	fillRef.value.open();
	}	
	
	function handleConfirm() {
    fillRef.value &&	fillRef.value.close();
	}
	
	function onBlur() {
		emits("blur", {result: result.value,index: props.index});
		focus.value = false;
	}
	
	uni.$on("swiper-change", () => {
		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;
}
</style>