Browse Source

优化图片及视频拖拽预览界面

zq 11 months ago
parent
commit
8413645efc

+ 1 - 1
src/views/book/courseware/preview/components/picture/PicturePreview.vue

@@ -10,7 +10,7 @@
             class="view-list"
             indicator-position="none"
             :autoplay="false"
-            :style="{ height: elementHeight - 144 + 17 + 'px' }"
+            :style="{ height: elementHeight - 144 - 17 + 'px' }"
           >
             <el-carousel-item v-for="(file, i) in data.file_list" :key="i">
               <el-image :id="file.file_id" :src="file.file_url" fit="contain" />

+ 14 - 0
src/views/book/courseware/preview/components/video/VideoPreview.vue

@@ -96,8 +96,22 @@ export default {
       this.isViewTopBottomBtn();
     },
   },
+  mounted() {
+    this.$nextTick(() => {
+      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);
+    });
+  },
   beforeDestroy() {
     window.removeEventListener('resize', this.handleResize);
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
   },
   methods: {
     handleAudioClick(index) {