uniProject/components/question/tiankong.vue

<template>
	<view class="fill-in-the-blank">
		<!-- 显示填空后的文本 -->
		<view class="formatted-text" v-html="formattedText" :question="question" :myflag="myflag"
			:change:myflag="TK.updateFlag" :change:question="TK.watchQuestionChange"></view>
		<!-- 提供与占位符数量相匹配的输入框 -->
		<template v-for="(placeholder, index) in placeholders" :key="index">
			<FillItem :value="question.reply[index]" :ref="`popup${index}Ref`" :index="index" @blur="onBlur"></FillItem>
		</template>

	</view>
</template>

<script>
	import FillItem from "./FillItem.vue";
	export default {
		components: {
			FillItem
		},
		props: {
			placeholders: { // 占位符
				type: Array,
				required: true
			},
			question: {
				type: Object,
			},
			showError: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				myflag: 0
			}
		},
		computed: {
			// 计算属性，用于生成填空后的文本
			formattedText() {
				let result = this.question.name;
				this.placeholders.forEach((placeholder, index) => {
					const regex2 = new RegExp(`\\<img `, 'g');
					result = result.replace(regex2, '<image ');
					// 使用正则表达式全局替换占位符
					const regex = new RegExp(`\\${placeholder}`, 'g');
					if (this.showError) {
						// 答题状态默认错误
						let answer_status = 'showError';
						// 更新答题状态正确
						this.question.reply[index] && this.question.result[index].some(citem => citem === this
							.question.reply[index].trim()) && (answer_status = 'active_right');
						result = result.replace(regex,
							`<input class="tiankong-input ${answer_status}" style="width: 50px;margin: 0 3px" id="t_${this.question.stId}_${index}" readonly data-index="${index}" value="${this.question.reply[index]}" />`
						);

					} else {
						result = result.replace(regex,
							`<input class="tiankong-input" style="width: 50px;margin: 0 3px" id="t_${this.question.stId}_${index}" readonly data-index="${index}" value="${this.question.reply[index]}" />`
						);

					}
				});
				this.myflag++;
				return result;
			},
		},
		methods: {
			setResult(data) {
				const {
					index,
					result
				} = data;
				this.question.reply[index] = result;
			},
			onBlur(data) {
				const {
					index,
					result
				} = data;

				this.setResult(data);
			},
			showPopup(str) {
				this.$refs[str][0].showPopup();
			}
		},
	}
</script>

<script module="TK" lang="renderjs">
	export default {
		data() {
			return {
				myQ: null
			}
		},
		methods: {
			updateFlag() {
				this.initListener(this.myQ)
			},
			updateFn(e) {
				const str = `popup${e.target.dataset.index}Ref`;
				this.$ownerInstance.callMethod('showPopup', str);
			},

			watchQuestionChange(newValue, oldValue, ownerInstance, instance) {
				if (newValue) {
					this.myQ = newValue;
					this.initListener(newValue)
				}
			},

			initListener(question) {
				if (!question) {
					return;
				}
				question.result.forEach((item, index) => {
					const dom = document.getElementById(`t_${question.stId}_${index}`)
					dom && dom.addEventListener('focus', (e) => this.updateFn(e))
				})
			},
		},
	}
</script>

<style scoped>
	.fill-in-the-blank {
		width: 100%;
	}

	.formatted-text {
		margin-bottom: 10px;
		font-size: 16px;
		line-height: 1.5;
	}

	.inputs-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.input-box {
		padding: 5px;
		width: 150px;
		/* 可根据需要调整宽度 */
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.tiankong-input {
		width: 50px;
	}
</style>