图片和视频预览时监听问题

src/views/book/courseware/preview/components/picture/PicturePreview.vue

@@ -47,6 +47,7 @@ import PreviewMixin from '../common/PreviewMixin';
 export default {
   name: 'PicturePreview',
   mixins: [PreviewMixin],
+  inject: ['getDragStatus'],
   data() {
     return {
       data: getPictureData(),
@@ -94,9 +95,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);

src/views/book/courseware/preview/components/video/VideoPreview.vue

@@ -62,6 +62,7 @@ export default {
   name: 'VideoPreview',
   components: { VideoPlay },
   mixins: [PreviewMixin],
+  inject: ['getDragStatus'],
   data() {
     return {
       data: getVideoData(),
@@ -110,9 +111,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);