Kaynağa Gözat

解决连线答案问题和音频预览组件ResizeObserver监听问题

dusenyao 11 ay önce
ebeveyn
işleme
2b900b0c78

+ 5 - 1
src/views/book/courseware/create/components/PreviewEdit.vue

@@ -50,6 +50,11 @@ import { previewComponentList } from '@/views/book/courseware/data/bookType';
 
 export default {
   name: 'PreviewEdit',
+  provide() {
+    return {
+      getDragStatus: () => this.drag.dragging,
+    };
+  },
   props: {
     rowList: {
       type: Array,
@@ -268,7 +273,6 @@ export default {
 
       // 获取行的宽度
       const row_width = document.getElementsByClassName(`row-${i}`)[0].getBoundingClientRect().width;
-      console.log(min_width, min_height);
       this.$emit('computedMoveData', {
         i,
         j,

+ 1 - 1
src/views/book/courseware/create/components/question/matching/Matching.vue

@@ -100,7 +100,7 @@ export default {
             this.data.option_list.push(getOption(this.data.property.column_num));
           }
           // 增加答案列表
-          this.data.answer.answer_list.push(Array(this.data.property.column_num).fill(''));
+          this.data.answer.answer_list.push(Array(this.data.property.column_num).fill({ mark: '' }));
           // 将答案列表最后一项的第一个元素设置进答案列表第一项
           this.data.answer.answer_list[this.data.answer.answer_list.length - 1][0] = {
             mark: this.data.option_list[this.data.option_list.length - 1][0].mark,

+ 6 - 2
src/views/book/courseware/preview/components/audio/AudioPreview.vue

@@ -66,6 +66,7 @@ export default {
   name: 'AudioPreview',
   components: { AudioPlay },
   mixins: [PreviewMixin],
+  inject: ['getDragStatus'],
   data() {
     return {
       data: getAudioData(),
@@ -115,9 +116,12 @@ export default {
       if (!canvasElement) return;
       const instanceName = `observer_${this.elementID}`;
       this.observersMap[instanceName] = new ResizeObserver((entries) => {
+        if (!this.getDragStatus()) return;
         for (let entry of entries) {
-          this.elementWidth = entry.contentRect.width;
-          this.elementHeight = entry.contentRect.height;
+          window.requestAnimationFrame(() => {
+            this.elementWidth = entry.contentRect.width;
+            this.elementHeight = entry.contentRect.height;
+          });
         }
       });
       this.observersMap[instanceName].observe(this.$el);