93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="relative flex items-center justify-center file-item" :style="{ height: fileSize, width: fileSize }">
|
|
<el-image class="image" v-if="type === 'image'" fit="contain" :src="uri"></el-image>
|
|
<video class="video" v-else-if="type === 'video'" :src="uri"></video>
|
|
<div
|
|
v-if="type == 'video'"
|
|
class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rounded-full w-5 h-5 flex justify-center items-center bg-[rgba(0,0,0,0.3)]"
|
|
>
|
|
<el-icon><CaretRight /></el-icon>
|
|
</div>
|
|
|
|
<div v-if="type === 'file'" class="flex items-center justify-center">
|
|
<img class="w-16" :src="getFileImage(uri)" />
|
|
</div>
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
import txt from '/@/assets/txt.png';
|
|
import word from '/@/assets/word.png';
|
|
import excel from '/@/assets/excel.png';
|
|
import pdf from '/@/assets/pdf.png';
|
|
import ppt from '/@/assets/ppt.png';
|
|
import folder from '/@/assets/icon_folder.png';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
// 图片地址
|
|
uri: {
|
|
type: String,
|
|
},
|
|
// 图片尺寸
|
|
fileSize: {
|
|
type: String,
|
|
default: '100px',
|
|
},
|
|
// 文件类型
|
|
type: {
|
|
type: String,
|
|
default: 'image',
|
|
},
|
|
},
|
|
emits: ['close'],
|
|
methods: {
|
|
getFileImage(uri?: string) {
|
|
if (uri?.includes('txt')) {
|
|
return txt;
|
|
}
|
|
|
|
if (uri?.includes('xls')) {
|
|
return excel;
|
|
}
|
|
|
|
if (uri?.includes('doc')) {
|
|
return word;
|
|
}
|
|
|
|
if (uri?.includes('pdf')) {
|
|
return pdf;
|
|
}
|
|
|
|
if (uri?.includes('ppt')) {
|
|
return ppt;
|
|
}
|
|
|
|
return folder;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.file-item {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
@apply bg-br-extra-light border border-br-extra-light;
|
|
.image,
|
|
.video {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|