文件选择器代码错误复原

web/src/components/fileSelector/index.vue

@@ -7,7 +7,8 @@
         <el-option v-for="item, index in listAllData" :key="index" :value="String(item[props.valueKey])"
           :label="item.name" />
       </el-select>
-      <div v-if="props.inputType === 'image'" style="position: relative;"
+      <div v-if="props.inputType === 'image'" style="position: relative;" class="form-display"
+        @mouseenter="formDisplayEnter" @mouseleave="formDisplayLeave"
         :style="{ width: props.inputSize + 'px', height: props.inputSize + 'px' }">
         <el-image :src="data" fit="scale-down" :style="{ width: props.inputSize + 'px', aspectRatio: '1 / 1' }">
           <template #error>
@@ -26,7 +27,8 @@
           <Close />
         </el-icon>
       </div>
-      <div v-if="props.inputType === 'video'"
+      <div v-if="props.inputType === 'video'" class="form-display" @mouseenter="formDisplayEnter"
+        @mouseleave="formDisplayLeave"
         style="position: relative; display: flex; align-items: center;  justify-items: center;"
         :style="{ width: props.inputSize * 2 + 'px', height: props.inputSize + 'px' }">
         <video :src="data" :controls="false" :autoplay="true" :muted="true" :loop="true"
@@ -43,7 +45,8 @@
           <Close />
         </el-icon>
       </div>
-      <div v-if="props.inputType === 'audio'"
+      <div v-if="props.inputType === 'audio'" class="form-display" @mouseenter="formDisplayEnter"
+        @mouseleave="formDisplayLeave"
         style="position: relative; display: flex; align-items: center;  justify-items: center;"
         :style="{ width: props.inputSize * 2 + 'px', height: props.inputSize + 'px' }">
         <audio :src="data" :controls="!!data" :autoplay="false" :muted="true" :loop="true"
@@ -62,7 +65,7 @@
       </div>
     </div>
     <el-dialog v-model="selectVisiable" :draggable="false" width="50%" :align-center="false"
-      @open="if (listData.length === 0) listRequest();" @closed="clear" modal-class="">
+      @open="if (listData.length === 0) listRequest();" @closed="clear" modal-class="_overlay">
       <template #header>
         <span class="el-dialog__title">文件选择</span>
         <el-divider style="margin: 0;" />
@@ -180,6 +183,8 @@ const listRequest = async () => {
   pageForm.limit = res.limit;
   selectedInit();
 };
+const formDisplayEnter = (e: MouseEvent) => (e.target as HTMLElement).style.setProperty('--fileselector-close-display', 'block');
+const formDisplayLeave = (e: MouseEvent) => (e.target as HTMLElement).style.setProperty('--fileselector-close-display', 'none');
 const listRequestAll = async () => {
   if (props.inputType !== 'selector') return;
   let res = await fileApi.GetAll();
@@ -261,6 +266,15 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.form-display {
+  --fileselector-close-display: none;
+  overflow: hidden;
+}
+
+._overlay {
+  width: unset !important;
+}
+
 .headerBar>* {
   display: flex;
   justify-content: space-between;
@@ -317,13 +331,10 @@ onMounted(() => {
 }
 
 .closeHover {
+  display: var(--fileselector-close-display);
   position: absolute;
   right: 2px;
   top: 2px;
   cursor: pointer;
 }
-
-.closeHover:hover {
-  color: black;
-}
 </style>