init

src/components/Material/file.vue

@@ -0,0 +1,92 @@
+<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>