From dac7ea90aebc80ff55f8dd2689db553058468526 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=BE=89?= <a@a.com>
Date: Sat, 23 Nov 2024 15:35:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E9=80=89=E6=8B=A9=E5=99=A8?=
 =?UTF-8?q?=E7=BB=99modal=E5=8A=A0class=E9=98=B2=E6=AD=A2=E8=A2=AB?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=B1=A1=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/fileSelector/index.vue | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/web/src/components/fileSelector/index.vue b/web/src/components/fileSelector/index.vue
index 0f00335..ded73b2 100644
--- a/web/src/components/fileSelector/index.vue
+++ b/web/src/components/fileSelector/index.vue
@@ -6,8 +6,7 @@
       <el-option v-for="item, index in listAllData" :key="index" :value="String(item[props.valueKey])"
         :label="item.name" />
     </el-select>
-    <div class="form-display" @mouseenter="formDisplayEnter" @mouseleave="formDisplayLeave"
-      v-if="props.inputType === 'image'" style="position: relative;"
+    <div v-if="props.inputType === 'image'" style="position: relative;"
       :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,8 +25,7 @@
         <Close />
       </el-icon>
     </div>
-    <div class="form-display" @mouseenter="formDisplayEnter" @mouseleave="formDisplayLeave"
-      v-if="props.inputType === 'video'"
+    <div v-if="props.inputType === 'video'"
       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"
@@ -44,8 +42,7 @@
         <Close />
       </el-icon>
     </div>
-    <div class="form-display" @mouseenter="formDisplayEnter" @mouseleave="formDisplayLeave"
-      v-if="props.inputType === 'audio'"
+    <div v-if="props.inputType === 'audio'"
       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"
@@ -64,7 +61,7 @@
     </div>
   </div>
   <el-dialog v-model="selectVisiable" :draggable="false" width="50%" :align-center="false"
-    @open="if (listData.length === 0) listRequest();" @closed="clear">
+    @open="if (listData.length === 0) listRequest();" @closed="clear" modal-class="_overlay">
     <template #header>
       <span class="el-dialog__title">文件选择</span>
       <el-divider style="margin: 0;" />
@@ -181,8 +178,6 @@ 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();
@@ -264,9 +259,8 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.form-display {
-  --fileselector-close-display: none;
-  overflow: hidden;
+._overlay {
+  width: unset !important;
 }
 
 .headerBar>* {
@@ -325,10 +319,13 @@ onMounted(() => {
 }
 
 .closeHover {
-  display: var(--fileselector-close-display);
   position: absolute;
   right: 2px;
   top: 2px;
   cursor: pointer;
 }
+
+.closeHover:hover {
+  color: black;
+}
 </style>
\ No newline at end of file