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

修复文件选择器的image表单类型显示错误的bug

Browse Source
This commit is contained in:
阿辉
2024-11-19 14:50:58 +08:00
parent 683b5164aa
commit 012c5a9c9c
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,19 +3,22 @@
<el-select v-if="props.inputType === 'selector'" v-model="data" suffix-icon="arrow-down" clearable <el-select v-if="props.inputType === 'selector'" v-model="data" suffix-icon="arrow-down" clearable
:multiple="props.multiple" placeholder="请选择文件" @click="selectVisiable = true" @clear="selectedInit" :multiple="props.multiple" placeholder="请选择文件" @click="selectVisiable = true" @clear="selectedInit"
@remove-tag="selectedInit"> @remove-tag="selectedInit">
<el-option v-for="item, index in listAllData" :key="index" :value="String(item[props.valueKey])" :label="item.name" /> <el-option v-for="item, index in listAllData" :key="index" :value="String(item[props.valueKey])"
: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;"
:style="{ width: props.inputImageSize + 'px', height: props.inputImageSize + 'px' }"> :style="{ width: props.inputImageSize + 'px', height: props.inputImageSize + 'px' }">
<el-image :src="data" fit="scale-down" :style="{ width: props.inputImageSize + 'px', aspectRatio: '1 / 1' }"> <el-image :src="data" fit="scale-down" :style="{ width: props.inputImageSize + 'px', aspectRatio: '1 / 1' }">
<template #error> <template #error>
<div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"> <div></div>
<el-icon :size="24">
<Plus />
</el-icon>
</div>
</template> </template>
</el-image> </el-image>
<div v-show="!(!!data)"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
<el-icon :size="24">
<Plus />
</el-icon>
</div>
<div @click="selectVisiable = true" class="addControllorHover"></div> <div @click="selectVisiable = true" class="addControllorHover"></div>
<el-icon v-show="!!data" class="closeHover" :size="16" @click="dataClear"> <el-icon v-show="!!data" class="closeHover" :size="16" @click="dataClear">
<Close /> <Close />
@@ -25,7 +28,7 @@
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.inputImageSize * 2 + 'px', height: props.inputImageSize + 'px' }"> :style="{ width: props.inputImageSize * 2 + 'px', height: props.inputImageSize + 'px' }">
<video :src="data" :controls="false" :autoplay="true" :muted="true" :loop="true"></video> <video :src="data" :controls="false" :autoplay="true" :muted="true" :loop="true"></video>
<div v-show="!(!!data)" <div v-show="!!data"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"> style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
<el-icon :size="24"> <el-icon :size="24">
<Plus /> <Plus />
@@ -167,7 +170,6 @@ const listRequest = async () => {
selectedInit(); selectedInit();
}; };
const listRequestAll = async () => { const listRequestAll = async () => {
console.log(props.inputType)
if (props.inputType !== 'selector') return; if (props.inputType !== 'selector') return;
let res = await fileApi.GetAll(); let res = await fileApi.GetAll();
listAllData.value = res.data; listAllData.value = res.data;
@@ -226,7 +228,7 @@ const dataClear = () => { data.value = null; onDataChange(null); }
// fs-crud部分 // fs-crud部分
const data = ref<any>(); const data = ref<any>(null);
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
watch(() => props.modelValue, (val) => { data.value = val; }, { immediate: true }); watch(() => props.modelValue, (val) => { data.value = val; }, { immediate: true });
const { ui } = useUi(); const { ui } = useUi();