admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文件选择器代码错误复原

Browse Source
This commit is contained in:
阿辉
2024-11-26 21:45:59 +08:00
parent c1db1c21d0
commit 4177f84a62
1 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/components/fileSelector/index.vue
View File

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