feat: 多项填空

src/views/Answer/components/QuestionsPc.vue

@@ -333,7 +333,6 @@
           <!-- 多项填空 -->
           <q-input-blanks
             v-else-if="question.question_type === 27"
-            :list="question.list"
             :config="question.config"
             v-model:error="question.error"
             v-model:answer="question.answer"

src/views/Answer/questions/QInputBlanks.vue

@@ -1,6 +1,14 @@
 <template>
-  <div>
-    <div v-html="config.text_content"></div>
+  <div class="blanks">
+    <template
+      v-for="(item, index) in getMultiBlankLeftTexts(config.text_content)"
+      :key="index"
+    >
+      <!-- 文字 -->
+      <div v-if="typeof item === 'string'" class="text" v-html="item"></div>
+      <!-- 填空 -->
+      <input v-else class="input" :style="`width: ${item.length * 20}px`" />
+    </template>
   </div>
 </template>
 
@@ -9,11 +17,6 @@ import { defineComponent, ref, watch } from "vue";
 
 export default defineComponent({
   props: {
-    // 列表
-    list: {
-      type: Array,
-      default: () => [],
-    },
     // 配置
     config: {
       type: Object,
@@ -45,9 +48,36 @@ export default defineComponent({
     function init() {}
     init();
 
-    return {};
+    // 获取多项填空左边的文本
+    function getMultiBlankLeftTexts(text) {
+      // text = text.replace(/(<([^>]+)>)/gi, ""); // 去除HTML标签
+      let index = -1;
+      const regex = /__+/g; // 匹配两个或以上的下划线
+      return text
+        .replace(regex, (match) => `_____{"length":${match.length}}___`)
+        .split("___")
+        .map((item) => {
+          if (item.substr(0, 2) === "__") {
+            index += 1;
+            return { index, ...JSON.parse(item.substr(2)) };
+          } else {
+            return item;
+          }
+        });
+    }
+
+    return { getMultiBlankLeftTexts };
   },
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.blanks {
+  .text {
+    display: inline-block;
+  }
+
+  .input {
+  }
+}
+</style>