修改句子填空的答案问题

src/components/Adult/preview/SentenceInput.vue

@@ -4,7 +4,7 @@
     <h2 v-if="curQue.title">{{ curQue.title }}</h2>
     <ul>
       <li v-for="(items, indexs) in curQue.option" :key="indexs">
-        <b v-if="items.number">{{ items.number }}</b>
+        <b class="xuhao" v-if="items.number">{{ items.number }}</b>
         <p
           :class="[oldsrc == items.mp3_list[0].id ? palyClass : '']"
           @click="handlePlayVoice(items.mp3_list[0].id)"
@@ -91,15 +91,25 @@
                 <template v-if="items.detail.pyPosition == 'top'">
                   <div
                     v-if="conent.pinyin == '__'"
-                    contenteditable
+                    contenteditable="true"
                     class="input pinyin"
+                    v-html="answerList[indexs].pinyin"
+                    @change="changeAnswerList($event, indexs, 'pinyin')"
                   ></div>
+                  <!-- 
+                    v-model="answerList[indexs].pinyin"
+                   -->
                   <p class="pinyin" v-else>
                     {{ conent.pinyin }}
                   </p>
                 </template>
                 <template v-if="conent.chs == '__'">
-                  <div contenteditable class="input chs"></div>
+                  <div
+                    contenteditable="true"
+                    class="input chs"
+                    v-html="answerList[indexs].chs"
+                    @change="changeAnswerList($event, indexs, 'chs')"
+                  ></div>
                 </template>
                 <template v-else>
                   <p class="chs">
@@ -112,8 +122,10 @@
                 >
                   <div
                     v-if="conent.pinyin == '__'"
-                    contenteditable
+                    contenteditable="true"
                     class="input pinyin"
+                    v-html="answerList[indexs].pinyin"
+                    @change="changeAnswerList($event, indexs, 'pinyin')"
                   ></div>
                   <p class="pinyin" v-else>
                     {{ conent.pinyin }}
@@ -184,6 +196,7 @@ export default {
       dataType: [], // 题型
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
       noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
+      answerList: [],
     };
   },
   computed: {},
@@ -272,10 +285,27 @@ export default {
       let resArr = type == "hanzi" ? str.split("") : str.split(/\s+/);
       return resArr;
     },
+    changeAnswerList(e, index, type) {
+      if (type == "pinyin") {
+        this.answerList[index].pinyin += e.target.innerHTML;
+      } else {
+        this.answerList[index].chs += e.target.innerHTML;
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.handleData();
+    if (this.dataType.indexOf("sentence_input_chs") != -1) {
+      this.curQue.option.forEach((item) => {
+        item.answer.forEach((it) => {
+          this.answerList.push({
+            chs: "",
+            pinyin: "",
+          });
+        });
+      });
+    }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -329,12 +359,13 @@ export default {
         width: 24px;
         line-height: 24px;
         font-size: 16px;
-        text-align: right;
+        text-align: center;
         margin-right: 8px;
         font-weight: 400;
-        color: #000000;
+        color: #ffffff;
         //    margin-top: 4px;
         font-family: "FZJCGFKTK";
+        border-radius: 50%;
       }
       > p {
         width: 24px;
@@ -476,4 +507,18 @@ export default {
     }
   }
 }
+.NPC-Big-Book-preview-green {
+  .Big-Book-prev-Textdes {
+    b.xuhao {
+      background: #24b99e;
+    }
+  }
+}
+.NPC-Big-Book-preview-brown {
+  .Big-Book-prev-Textdes {
+    b.xuhao {
+      background: #bd8865;
+    }
+  }
+}
 </style>