uniProject/components/question/FillItem.vue

<template>
	<uni-popup type="bottom" background-color="#fff" ref="fillRef" class="FillPopup" :animation="false">
		<view class="popup-content">
			<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";
	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 handleClose() {
		focus.value = false;
	}

	function showPopup() {
	
		focus.value = true;
		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-bottom: 20px;
		padding-top: 20px;
	}
	.my-textarea {
		padding: 0 5px;
		height: 36px;
		line-height: 36px;
	}
</style>