解决滚动条对宽度的异常影响

src/components/ImgPreview/ImgPreview.vue

@@ -19,6 +19,7 @@
   >
     <video
       :src="previewData"
+      ref="video"
       controls
       :style="{ width: '100%', height: '100%' }"
     ></video>
@@ -32,7 +33,7 @@
     v-if="copyFileType === '.mp3'"
     :before-close="closeImgPreview"
   >
-    <audio :src="previewData" controls></audio>
+    <audio :src="previewData" ref="audio" controls></audio>
   </el-dialog>
 </template>
 
@@ -45,6 +46,7 @@ import {
   watch,
   onMounted,
   defineExpose,
+  onDeactivated
 } from "vue";
 const props = defineProps({
   showPreview: {
@@ -65,6 +67,9 @@ watch(
   (newValue) => {
     // console.log(111);
     showImageViewer.value = newValue;
+    if(newValue == false){
+      console.log('watch',video.value);
+    }
   },
   () => props.previewData,
   (newValue) => {
@@ -74,6 +79,8 @@ watch(
 );
 const previewImg = ref(null);
 const showImageViewer = ref(false); //组件是否显示
+const video = ref(null); 
+const audio = ref(null); 
 const emit = defineEmits(["closeImgPreview"]);
 const showImg = () => {
   //预览大图
@@ -81,7 +88,9 @@ const showImg = () => {
 };
 const closeImgPreview = () => {
   //必须要这个事件 不然点击右上角关闭按钮没有反应
-  // console.log('sonClose');
+  console.log('sonClose');
+  // video.value.pause();
+  // audio.value.pause();
   emit("closeImgPreview");
 };
 const canSeeImg = (copyFileType)=>{
@@ -94,6 +103,9 @@ const canSeeImg = (copyFileType)=>{
     return false
   }
 }
+onDeactivated(()=>{
+  console.log('audio',audio.value);
+})
 </script>
 
 <style scoped>

src/views/department/MyFile.vue

@@ -1968,7 +1968,7 @@ p {
 .detailBox {
     width: 100%;
     height: 50%;
-    overflow-y: auto;
+    // overflow-y: auto;
 }
 .showBox{
     height: calc(100% - 48px - 24px);
@@ -1990,7 +1990,7 @@ p {
 
 .fileTable {
     height: 50%;
-    overflow-y: auto;
+    // overflow-y: auto;
     // margin-top: 55px;
 }
 

src/views/myfile/MyFile.vue

@@ -389,7 +389,7 @@
                     :copyFolderName="copyFolderName" @getRename="getRename">
                 </FolderReName>
             </div>
-            <ImgPreview  :previewData="previewData" :copyFileType="copyFileType" :showPreview="showPreview"
+            <ImgPreview v-if="closeImgPreview" :previewData="previewData" :copyFileType="copyFileType" :showPreview="showPreview"
                 @closeImgPreview="closeImgPreview"></ImgPreview>
             <div>
                 <FileTree v-if="fileTrees" :fileTrees="fileTrees" :newSpaceId="newSpaceId" :fileId="clickRowId"
@@ -2085,7 +2085,7 @@ p {
 .detailBox {
     width: 100%;
     height: 50%;
-    overflow-y: auto;
+    // overflow-y: auto;
 }
 
 :deep(.el-dialog__header) {
@@ -2095,7 +2095,7 @@ p {
 
 .fileTable {
     height: 50%;
-    overflow-y: auto;
+    // overflow-y: auto;
 }
 
 .setCli {
@@ -2152,6 +2152,7 @@ p {
 
 :deep([data-v-69cdaa40] .el-collapse-item__header) {
     padding-left: 10px;
+    box-sizing: border-box;
 }
 
 :deep(.el-collapse-item__content) {

src/views/publicment/MyFile.vue

@@ -1977,7 +1977,7 @@ p {
 .detailBox {
     width: 100%;
     height: 50%;
-    overflow-y: auto;
+    // overflow-y: auto;
 }
 .showBox{
     height: calc(100% - 48px - 24px);
@@ -1991,7 +1991,7 @@ p {
 
 .fileTable {
     height: 50%;
-    overflow-y: hidden;
+    // overflow-y: hidden;
     // margin-top: 48px;
 }