录音组件

src/components/Adult/Preview.vue

@@ -121,6 +121,9 @@
                 <template v-if="itemss.type == 'checkbox_self_assessment_chs'">
                   <Checkbox :cur-que="itemss.data" />
                 </template>
+                <template v-if="itemss.type == 'record_control_mini'||itemss.type == 'record_control_normal'||itemss.type == 'record_control_pro'||itemss.type == 'record_control_promax'">
+                  <RecordModule :cur-que="itemss.data" />
+                </template>
               </template>
             </div>
           </div>
@@ -154,6 +157,7 @@ import SentenceListenRead from "./preview/SentenceListenRead.vue"; // 听并朗
 import SentenceSort from "./preview/SentenceSort.vue"; // 句子拖拽排序
 import Checkbox from "./preview/CheckBoxModule.vue"; // 问卷调查-多选题
 import VoiceMatrix from "./preview/VoiceMatrix.vue"; // 语音矩阵
+import RecordModule from "./preview/RecordModule.vue" // 录音组件
 
 export default {
   name: "Preview",
@@ -181,6 +185,7 @@ export default {
     SentenceSort,
     Checkbox,
     VoiceMatrix,
+    RecordModule,
   },
   props: [
     "context",

src/components/Adult/preview/RecordModule.vue

@@ -1,21 +1,28 @@
 <template>
   <div class="NPC-RecordModule">
-      
+      <Soundrecord @handleWav="handleWav" :type="curQue.type?typeList[curQue.type]:'normal'" class="luyin-box" :class="[curQue.type]"/>
   </div>
 </template>
 
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
+import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
+      Soundrecord
   },
   props: ["curQue"],
   data() {
     //这里存放数据
     return {
-      
+        typeList:{
+            'record_control_mini':'mini',
+            'record_control_normal':'normal',
+            'record_control_pro':'pro',
+            'record_control_promax':'promax'
+        }
     };
   },
   //计算属性 类似于data概念
@@ -23,7 +30,11 @@ export default {
   //监控data中数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+      handleWav(data) {
+        
+      },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -47,6 +58,21 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .NPC-RecordModule{
-    
+    width: 100%;
+    .luyin-box{
+        padding:0 12px;
+    }
+    .record_control_mini{
+        width: 64px;
+    }
+    .record_control_normal{
+        width:129px;
+    }
+    .record_control_pro{
+        width:200px;
+    }
+    .record_control_promax{
+        width:280px;
+    }
 }
 </style>