uniProject/components/question/FillItem.vue

<template>
	<view>
		<uni-popup type="bottom" background-color="#fff" ref="fillRef" class="FillPopup" :animation="true">
			<view class="popup-content">
				<input v-model.trim="result" @close="handleClose" :focus="focus" placeholder="请输入答案" :auto-blur="true" :adjust-position="true" style="position: z-index: 10;"
					@blur="onBlur" @confirm="handleConfirm" class="my-textarea" type="text" />
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		nextTick,
		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 handleClear() {
		result.value = '';
	}

	function handleClose() {
		focus.value = false;
	}

	function showPopup() {
	
		fillRef.value && fillRef.value.open();
		nextTick(() => focus.value = true);
	}

	function handleConfirm() {
		fillRef.value && fillRef.value.close();
	}

	function onBlur() {
		emits("blur", {
			result: result.value,
			index: props.index
		});
		focus.value = false;
	}

	uni.$on("swiper-change", () => {
		fillRef.value && fillRef.value.close()
	})

	defineExpose({
		showPopup,handleClear
	})
</script>

<style lang="scss" scoped>
	.popup-content {
		padding: 10px;
	}
	.my-textarea {
		height: 36px;
		line-height: 36px;
	}
</style>