优化图片组件与视频组件预览尺寸问题

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

@@ -44,8 +44,8 @@
         </div>
         <div v-if="'list' === data.property.view_method && isEnable(data.property.view_memo)" class="memo-area">
           <div v-for="(file, i) in data.file_info_list" :key="i">
-            <div class="title-div" v-if="curPictureMemoIndex === i">{{ file.title ?? file.title }}</div>
-            <div class="memo-div" v-if="curPictureMemoIndex === i">{{ file.intro ?? file.intro }}</div>
+            <div v-if="curPictureMemoIndex === i" class="title-div">{{ file.title ?? file.title }}</div>
+            <div v-if="curPictureMemoIndex === i" class="memo-div">{{ file.intro ?? file.intro }}</div>
           </div>
         </div>
       </div>
@@ -107,18 +107,39 @@ export default {
       },
       deep: true,
     },
-    elementWidth(newWidth) {
-      this.elementWidth = newWidth;
+    elementWidth() {
       this.isViewLeftRightBtn();
     },
-    elementHeight(newHeight) {
-      this.elementHeight = newHeight;
-    },
   },
   mounted() {
     this.$nextTick(() => {
       const canvasElement = document.querySelector('.canvas');
-      if (!canvasElement) return;
+      if (!canvasElement) {
+        const ele = this.$refs.pictureAreaBox;
+        const sn_position = this.data.property.sn_position;
+        const viewMemo = this.isEnable(this.data.property.view_memo);
+        // 序号在左和右补齐序号高度，去掉padding(8*2)
+        if (sn_position.includes('left') || sn_position.includes('right')) {
+          this.elementWidth = viewMemo ? (ele.clientWidth - 16) * 0.8 : ele.clientWidth - 16;
+          this.elementHeight = ele.clientHeight + 30;
+        } else {
+          this.elementWidth = viewMemo ? ele.clientWidth * 0.8 : ele.clientWidth;
+          this.elementHeight = ele.clientHeight;
+        }
+        this.fileLen = this.data.file_list.length;
+        this.isViewLeftRightBtn();
+        return;
+      }
+      const mainEle = this.$refs.pictureArea;
+      // 检查元素是否包含已知的类名
+      mainEle.classList.forEach((className) => {
+        // 排除已知的类名
+        if (className !== 'audio-area') {
+          // 打印另一个类名
+          this.elementID = className;
+        }
+      });
+
       const instanceName = `observer_${this.elementID}`;
       this.pictureObserversMap[instanceName] = new ResizeObserver((entries) => {
         if (!this.getDragStatus()) return;
@@ -179,6 +200,20 @@ export default {
       this.scrollPosition += step * direction;
       container.scrollLeft += step * direction;
     },
+    autoResize(entry) {
+      window.requestAnimationFrame(() => {
+        const sn_position = this.data.property.sn_position;
+        const viewMemo = this.isEnable(this.data.property.view_memo);
+        // 序号在上方和下方减去序号高度，在左右去掉padding(8*2)
+        if (sn_position.includes('top') || sn_position.includes('bottom')) {
+          this.elementWidth = viewMemo ? entry.contentRect.width * 0.8 : entry.contentRect.width;
+          // this.elementHeight = entry.contentRect.height - 30;
+        } else {
+          this.elementWidth = viewMemo ? (entry.contentRect.width - 16) * 0.8 : entry.contentRect.width - 16;
+          this.elementHeight = entry.contentRect.height;
+        }
+      });
+    },
   },
 };
 </script>
@@ -208,6 +243,7 @@ export default {
         float: left;
         width: 15%;
         padding-left: 5px;
+        text-align: left;
         border-left: 1px solid #eee;
 
         .title-div {
@@ -245,6 +281,10 @@ export default {
       .container-box {
         position: relative;
 
+        .left {
+          left: 0;
+        }
+
         .arrow {
           position: absolute;
           top: 0;

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

@@ -120,7 +120,25 @@ export default {
   mounted() {
     this.$nextTick(() => {
       const canvasElement = document.querySelector('.canvas');
-      if (!canvasElement) return;
+      if (!canvasElement) {
+        const ele = this.$refs.videoAreaBox;
+        const sn_position = this.data.property.sn_position;
+        // 序号在左和右补齐序号高度，去掉padding(8*2)
+        if (sn_position.includes('left') || sn_position.includes('right')) {
+          this.elementWidth = ele.clientWidth - 16;
+          this.elementHeight = ele.clientHeight + 30;
+        } else {
+          this.elementWidth = ele.clientWidth;
+          this.elementHeight = ele.clientHeight;
+        }
+
+        if (ele.clientHeight <= 0) {
+          this.elementHeight = this.data.min_height;
+        }
+        this.fileLen = this.data.file_list.length;
+        this.isViewLeftRightBtn();
+        return;
+      }
       const instanceName = `observer_${this.elementID}`;
       this.videoObserversMap[instanceName] = new ResizeObserver((entries) => {
         if (!this.getDragStatus()) return;