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

文件选择器的video类型优化

Browse Source
This commit is contained in:
阿辉
2024-11-19 15:00:07 +08:00
parent 1301346772
commit 4a8f907c7f
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

@@ -7,8 +7,8 @@
: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;"
:style="{ width: props.inputImageSize + 'px', height: props.inputImageSize + 'px' }"> :style="{ width: props.inputSize + 'px', height: props.inputSize + '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.inputSize + 'px', aspectRatio: '1 / 1' }">
<template #error> <template #error>
<div></div> <div></div>
</template> </template>
@@ -26,9 +26,10 @@
</div> </div>
<div v-if="props.inputType === 'video'" <div v-if="props.inputType === 'video'"
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.inputSize * 2 + 'px', height: props.inputSize + 'px' }">
<video :src="data" :controls="false" :autoplay="true" :muted="true" :loop="true"></video> <video :src="data" :controls="false" :autoplay="true" :muted="true" :loop="true"
<div v-show="!!data" :style="{ maxWidth: props.inputSize * 2 + 'px', maxHeight: props.inputSize + 'px', margin: '0 auto' }"></video>
<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 />
@@ -41,8 +42,9 @@
</div> </div>
<div v-if="props.inputType === 'audio'" <div v-if="props.inputType === 'audio'"
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.inputSize * 2 + 'px', height: props.inputSize + 'px' }">
<audio style="width: 100%; z-index: 1;" :src="data" :controls="!!data" :autoplay="false" :muted="true" :loop="true"></audio> <audio :src="data" :controls="!!data" :autoplay="false" :muted="true" :loop="true"
style="width: 100%; z-index: 1;"></audio>
<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">
@@ -140,8 +142,8 @@ const props = defineProps({
// 表单item类型，不为selector是需要设置valueKey，否则可能获取不到媒体数据 // 表单item类型，不为selector是需要设置valueKey，否则可能获取不到媒体数据
inputType: { type: Object as PropType<'selector' | 'image' | 'video' | 'audio'>, default: 'selector' }, inputType: { type: Object as PropType<'selector' | 'image' | 'video' | 'audio'>, default: 'selector' },
// inputType为image时生效 // inputType不为selector时生效
inputImageSize: { type: Number, default: 100 }, inputSize: { type: Number, default: 100 },
// v-model绑定的值是file数据的哪个key，默认是id // v-model绑定的值是file数据的哪个key，默认是id
valueKey: { type: String, default: 'id' }, valueKey: { type: String, default: 'id' },