优化预览编辑下监听尺寸事件

src/views/book/courseware/create/components/base/stem/Stem.vue

@@ -72,7 +72,6 @@ export default {
       this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case =
         this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case;
 
-      console.log(this.data.paragraph_list_parameter);
       CrateParsedTextInfo_Pinyin(this.data.paragraph_list_parameter).then((res) => {
         if (res.parsed_text) {
           this.data.paragraph_list = res.parsed_text.paragraph_list;

src/views/book/courseware/preview/components/audio/AudioPreview.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="audio_area" :style="getAreaStyle()">
+  <div ref="audioArea" class="audio-area" :style="getAreaStyle()">
     <SerialNumberPosition :property="data.property" />
 
-    <div ref="audioArea" class="main">
+    <div ref="audioAreaBox" class="main">
       <ul v-if="'independent' === data.property.view_method" class="view-independent">
         <li v-for="(file, i) in data.file_list" :key="i">
           <AudioPlay
@@ -73,8 +73,9 @@ export default {
       elementWidth: 0,
       elementHeight: 0,
       fileLen: 0,
-      resizeObserver: null, // ResizeObserver 实例，用于监听元素大小变化
       viewScroll: 'hidden',
+      elementID: '',
+      observersMap: {},
     };
   },
   watch: {
@@ -82,41 +83,53 @@ export default {
       handler(val) {
         this.fileLen = val.file_list.length;
         if (this.fileLen > 0 && this.data.property.view_method === 'list') {
-          const ele = this.$refs.audioArea;
+          const ele = this.$refs.audioAreaBox;
           this.elementWidth = ele.clientWidth;
           this.elementHeight = ele.clientHeight;
-
-          window.addEventListener('resize', this.handleResize);
+          const mainEle = this.$refs.audioArea;
+          // 检查元素是否包含已知的类名
+          mainEle.classList.forEach((className) => {
+            // 排除已知的类名
+            if (className !== 'audio-area') {
+              // 打印另一个类名
+              this.elementID = className;
+            }
+          });
         }
       },
       deep: true,
     },
-    elementWidth(newWidth, oldWidth) {
-      this.elementWidth = newWidth;
+    elementWidth(newWidth) {
+      if (this.data.property.view_method === 'list') this.elementWidth = newWidth;
     },
-    elementHeight(newHeight, oldHeight) {
-      this.elementHeight = newHeight;
-      this.isViewScroll();
+    elementHeight(newHeight) {
+      if (this.data.property.view_method === 'list') {
+        this.elementHeight = newHeight;
+        this.isViewScroll();
+      }
     },
   },
   mounted() {
     this.$nextTick(() => {
-      let _class = document.querySelector('.canvas');
-      if (_class === null) return;
-      if (_class.classList.contains('canvas')) {
-        this.resizeObserver = new ResizeObserver((entries) => {
-          for (let entry of entries) {
-            this.elementWidth = entry.contentRect.width;
-            this.elementHeight = entry.contentRect.height;
-          }
-        });
-        this.resizeObserver.observe(this.$el);
-      }
+      const canvasElement = document.querySelector('.canvas');
+      if (!canvasElement) return;
+      const instanceName = `observer_${this.elementID}`;
+      this.observersMap[instanceName] = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          this.elementWidth = entry.contentRect.width;
+          this.elementHeight = entry.contentRect.height;
+        }
+      });
+      this.observersMap[instanceName].observe(this.$el);
+    });
+  },
+  beforeDestroy() {
+    Object.values(this.observersMap).forEach((observer) => {
+      observer.disconnect();
     });
   },
   methods: {
     handleAudioClick(index) {
-      console.log(this.data.file_list);
       // 获取 Carousel 实例
       const carousel = this.$refs.audio_carousel;
       // 切换到对应索引的文件
@@ -154,7 +167,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.audio_area {
+.audio-area {
   display: grid;
   gap: 6px;
   padding: 8px;

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

@@ -1,8 +1,8 @@
 <template>
-  <div class="picture-area" :style="getAreaStyle()">
+  <div ref="pictureArea" class="picture-area" :style="getAreaStyle()">
     <SerialNumberPosition :property="data.property" />
 
-    <div ref="pictureArea" class="main">
+    <div ref="pictureAreaBox" class="main">
       <div class="view-area">
         <template v-if="'list' === data.property.view_method">
           <el-carousel
@@ -55,56 +55,61 @@ export default {
       elementHeight: 0,
       viewLeftRightBtn: false,
       fileLen: 0,
-      resizeObserver: null, // ResizeObserver 实例，用于监听元素大小变化
+      elementID: '',
+      observersMap: {},
     };
   },
   watch: {
     data: {
       handler(val) {
         this.fileLen = val.file_list.length;
-        if (this.fileLen > 0) {
-          const ele = this.$refs.pictureArea;
+        if (this.fileLen > 0 && this.data.property.view_method === 'list') {
+          const ele = this.$refs.pictureAreaBox;
           this.elementWidth = ele.clientWidth;
           this.elementHeight = ele.clientHeight;
-          window.addEventListener('resize', this.handleResize);
+          const mainEle = this.$refs.pictureArea;
+          // 检查元素是否包含已知的类名
+          mainEle.classList.forEach((className) => {
+            // 排除已知的类名
+            if (className !== 'audio-area') {
+              // 打印另一个类名
+              this.elementID = className;
+            }
+          });
         }
       },
       deep: true,
     },
-    elementWidth(newWidth, oldWidth) {
-      // console.log(`宽度从 ${oldWidth} 变为 ${newWidth}`);
+    elementWidth(newWidth) {
       this.elementWidth = newWidth;
       this.isViewLeftRightBtn();
     },
-    elementHeight(newHeight, oldHeight) {
-      // console.log(`高度从 ${oldHeight} 变为 ${newHeight}`);
+    elementHeight(newHeight) {
       this.elementHeight = newHeight;
     },
   },
   mounted() {
     this.$nextTick(() => {
-      let _class = document.querySelector('.canvas');
-      if (_class === null) return;
-      if (_class.classList.contains('canvas')) {
-        this.resizeObserver = new ResizeObserver((entries) => {
-          for (let entry of entries) {
-            this.elementWidth = entry.contentRect.width;
-            this.elementHeight = entry.contentRect.height;
-          }
-        });
-        this.resizeObserver.observe(this.$el);
-      }
+      const canvasElement = document.querySelector('.canvas');
+      if (!canvasElement) return;
+      const instanceName = `observer_${this.elementID}`;
+      this.observersMap[instanceName] = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          this.elementWidth = entry.contentRect.width;
+          this.elementHeight = entry.contentRect.height;
+        }
+      });
+      this.observersMap[instanceName].observe(this.$el);
     });
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.handleResize);
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
+    Object.values(this.observersMap).forEach((observer) => {
+      observer.disconnect();
+    });
   },
   methods: {
     handleResize() {
-      const width = this.$refs.pictureArea.clientWidth;
+      const width = this.$refs.pictureAreaBox.clientWidth;
       if (width !== this.elementWidth) {
         this.elementWidth = width;
       }

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="video_area" :style="getAreaStyle()">
+  <div ref="videoArea" class="video_area" :style="getAreaStyle()">
     <SerialNumberPosition :property="data.property" />
-    <div ref="videoArea" class="main">
+    <div ref="videoAreaBox" class="main">
       <ul v-if="'independent' === data.property.view_method" class="view-independent">
         <li v-for="(file, i) in data.file_list" :key="i">
           <VideoPlay
@@ -71,51 +71,57 @@ export default {
       viewTopBottomBtn: false,
       fileLen: 0,
       translateY: 0,
+      elementID: '',
+      observersMap: {},
     };
   },
   watch: {
     data: {
       handler(val) {
         this.fileLen = val.file_list.length;
-        if (this.fileLen > 0) {
-          const ele = this.$refs.videoArea;
+        if (this.fileLen > 0 && this.data.property.view_method === 'list') {
+          const ele = this.$refs.videoAreaBox;
           this.elementWidth = ele.clientWidth;
           this.elementHeight = ele.clientHeight;
-          window.addEventListener('resize', this.handleResize);
+          const mainEle = this.$refs.videoArea;
+          // 检查元素是否包含已知的类名
+          mainEle.classList.forEach((className) => {
+            // 排除已知的类名
+            if (className !== 'audio-area') {
+              // 打印另一个类名
+              this.elementID = className;
+            }
+          });
         }
       },
       deep: true,
     },
-    elementWidth(newWidth, oldWidth) {
-      // console.log(`宽度从 ${oldWidth} 变为 ${newWidth}`);
+    elementWidth(newWidth) {
       this.elementWidth = newWidth;
     },
-    elementHeight(newHeight, oldHeight) {
-      // console.log(`高度从 ${oldHeight} 变为 ${newHeight}`);
+    elementHeight(newHeight) {
       this.elementHeight = newHeight;
       this.isViewTopBottomBtn();
     },
   },
   mounted() {
     this.$nextTick(() => {
-      let _class = document.querySelector('.canvas');
-      if (_class === null) return;
-      if (_class.classList.contains('canvas')) {
-        this.resizeObserver = new ResizeObserver((entries) => {
-          for (let entry of entries) {
-            this.elementWidth = entry.contentRect.width;
-            this.elementHeight = entry.contentRect.height;
-          }
-        });
-        this.resizeObserver.observe(this.$el);
-      }
+      const canvasElement = document.querySelector('.canvas');
+      if (!canvasElement) return;
+      const instanceName = `observer_${this.elementID}`;
+      this.observersMap[instanceName] = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          this.elementWidth = entry.contentRect.width;
+          this.elementHeight = entry.contentRect.height;
+        }
+      });
+      this.observersMap[instanceName].observe(this.$el);
     });
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.handleResize);
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
+    Object.values(this.observersMap).forEach((observer) => {
+      observer.disconnect();
+    });
   },
   methods: {
     handleAudioClick(index) {
@@ -144,7 +150,7 @@ export default {
       }
     },
     handleResize() {
-      const width = this.$refs.videoArea.clientWidth;
+      const width = this.$refs.videoAreaBox.clientWidth;
       if (width !== this.elementWidth) {
         this.elementWidth = width;
       }