图片独立播放高度调整

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

@@ -5,7 +5,13 @@
     <div ref="pictureArea" class="main">
       <div class="view-area">
         <template v-if="'list' === data.property.view_method">
-          <el-carousel ref="pictureCarousel" class="view-list" indicator-position="none" :autoplay="false">
+          <el-carousel
+            ref="pictureCarousel"
+            class="view-list"
+            indicator-position="none"
+            :autoplay="false"
+            :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" />
             </el-carousel-item>
@@ -46,6 +52,7 @@ export default {
       data: getPictureData(),
       curImgIndex: 0,
       elementWidth: 0,
+      elementHeight: 0,
       viewLeftRightBtn: false,
       fileLen: 0,
     };
@@ -56,17 +63,23 @@ export default {
         this.fileLen = val.file_list.length;
         if (this.fileLen > 0) {
           // this.initResizeObserver();
-          this.elementWidth = this.$refs.pictureArea.clientWidth;
+          const ele = this.$refs.pictureArea;
+          this.elementWidth = ele.clientWidth;
+          this.elementHeight = ele.clientHeight;
           window.addEventListener('resize', this.handleResize);
         }
       },
       deep: true,
     },
     elementWidth(newWidth, oldWidth) {
-      // console.log(`宽度从 ${oldWidth} 变为 ${newWidth}`);
+      console.log(`宽度从 ${oldWidth} 变为 ${newWidth}`);
       this.elementWidth = newWidth;
       this.isViewLeftRightBtn();
     },
+    elementHeight(newHeight, oldHeight) {
+      console.log(`高度从 ${oldHeight} 变为 ${newHeight}`);
+      this.elementHeight = newHeight;
+    },
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.handleResize);