|
@@ -1,12 +1,22 @@
|
|
|
<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>
|
|
|
+ <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,
|
|
@@ -72,30 +82,26 @@
|
|
|
this.setResult(data);
|
|
|
},
|
|
|
showPopup(str) {
|
|
|
- uni.$emit('tiankongItemShow', {index: str, value: this.question.reply[str],question: this.question})
|
|
|
+ this.$refs[str][0].showPopup();
|
|
|
}
|
|
|
},
|
|
|
- created() {
|
|
|
- uni.$on('tiankongItemBlur', (data) => {
|
|
|
- if (data.question.stId === this.question.stId) {
|
|
|
- this.setResult({index: data.index,result: data.value});
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<script module="TK" lang="renderjs">
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {myQ: null}
|
|
|
+ return {
|
|
|
+ myQ: null
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
updateFlag() {
|
|
|
this.initListener(this.myQ)
|
|
|
},
|
|
|
updateFn(e) {
|
|
|
- this.$ownerInstance.callMethod('showPopup',+e.target.dataset.index);
|
|
|
+ const str = `popup${e.target.dataset.index}Ref`;
|
|
|
+ this.$ownerInstance.callMethod('showPopup', str);
|
|
|
},
|
|
|
|
|
|
watchQuestionChange(newValue, oldValue, ownerInstance, instance) {
|