feat:新增 填空题

src/views/Design/components/Questions/Completion.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="cont">
+    <van-field
+      v-model="element.stem"
+      :label="element.stem"
+      :required="element.config.is_required === 1"
+      label-align="top"
+    >
+      <template #label>
+        <div
+          :contenteditable="active"
+          class="van-field"
+          @blur="saveStem($event, element)"
+          v-html="element.stem"
+        ></div>
+      </template>
+      <template #input>
+        <div contenteditable="true" class="input other_input"></div>
+      </template>
+    </van-field>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const props = defineProps({
+  element: {
+    type: Object,
+    default: () => {
+      //补充
+    }
+  },
+  active: {
+    type: Boolean,
+    default: false
+  },
+  sn: { type: String, default: '' },
+  questionType: { type: [String, Number], default: 4 }
+});
+const element = ref(props.element);
+// 创建一个本地副本以保存更改
+const localElement = ref({ ...props.element });
+
+const saveStem = (e) => {
+  localElement.value.stem = e.target.innerHTML;
+  // 如果需要，可以在这里发出事件以通知父组件
+  // this.$emit('update:element', localElement.value);
+};
+</script>
+
+<style scoped lang="scss">
+.cont {
+  .other_input {
+    width: 100%;
+    height: 40px;
+    margin-bottom: 10px;
+    padding: 3px 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    outline: none;
+  }
+}
+
+.text_value {
+  border: 1px solid #ccc !important;
+}
+</style>