文本+录音组件

src/components/Adult/Preview.vue

@@ -58,9 +58,12 @@
                     :NNPEAnnotationList="NNPEAnnotationList"
                   />
                 </template>
-                <template v-if="itemss.data.type == 'input_record'">
+                <template v-if="itemss.data.type == 'input_record_chs'">
                     <InputHasRecord :curQue="itemss.data" />
                 </template>
+                <template v-if="itemss.data.type == 'recordHZ_inputPY_chs'">
+                    <TextInputRecord :curQue="itemss.data" />
+                </template>
               </template>
             </div>
           </div>
@@ -79,6 +82,7 @@ import WordPhrase from "./preview/WordPhrase.vue"; // 生词 短语
 import Notes from "./preview/Notes.vue"; // 注释
 import Ligature from "./preview/Ligature.vue";
 import InputHasRecord from "./preview/InputHasRecord.vue" // 输入加录音
+import TextInputRecord from "./preview/TextInputRecord.vue" // 文本+输入+录音
 export default {
   name: "preview",
   components: {
@@ -90,6 +94,7 @@ export default {
     Notes,
     Ligature,
     InputHasRecord,
+    TextInputRecord,
   },
   props: ["context", "fatherName"],
   data() {

src/components/Adult/preview/TextInputRecord.vue

@@ -0,0 +1,135 @@
+<!--  -->
+<template>
+  <div class="Big-Book-prev-Textdes" v-if="curQue">
+    <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>
+          <span class="item-con">{{items.con}}</span>
+          <input
+                @input="handleInput"
+                :class="['item-input']"
+                v-model="curQue.Bookanswer[indexs]"
+                placeholder="输入"
+            >
+          <template v-if="items.isRecord">
+              <Soundrecord @handleWav="handleWav" type="mini" class="luyin-box"/>
+          </template>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
+export default {
+  components: {Soundrecord},
+  props: ["curQue"],
+  data() {
+    return {
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+        // input 输入时
+        handleInput (e) {
+            e.target.value = e.target.value ? e.target.value.trim() : '';
+        },
+        // 处理数据
+        handleData(){
+            if(!this.curQue.Bookanswer){
+                let curCorrect = [];
+                this.curQue.option.forEach(item => {
+                    curCorrect.push('')
+                });
+                this.$set(this.curQue, "Bookanswer", curCorrect);
+            }
+        },
+        handleWav(data) {
+        
+        },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+      this.handleData()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.Big-Book-prev-Textdes{
+    width: 100%;
+    padding: 0 12px;
+    h2{
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 150%;
+        color: #000000;
+        margin: 0 2px 8px 2px;
+    }
+    ul{
+        display: flex;
+        flex-flow: wrap;
+        justify-content: start;
+        list-style: none;
+        li{
+            width: 100%;
+            background: #FFFFFF;
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            box-sizing: border-box;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            padding: 8px 8px 8px 12px;
+            margin-bottom: 8px;
+            >b{
+               width: 34px;
+               line-height: 24px; 
+               font-size: 16px;
+               text-align: right;
+               margin-right: 16px;
+               font-weight: 400;
+               color: #000000;
+            }
+            .item-con{
+                min-width: 80px;
+                font-size: 16px;
+                line-height: 150%;
+                color: #000000;
+                margin-right: 8px;
+                word-break: break-word;
+            }
+            input{
+                flex: 1;
+                border: 1px solid rgba(0, 0, 0, 0.15);
+                box-sizing: border-box;
+                border-radius: 8px;
+                outline: none;
+                height: 40px;
+                padding: 8px;
+                color: #000000;
+                font-size: 16px;
+                line-height: 150%;
+            }
+            .luyin-box{
+                border: 1px solid rgba(0, 0, 0, 0.1);
+                border-radius: 8px;
+                width: 68px;
+                margin-left: 16px;
+            }
+        }
+    }
+}
+</style>