qingdao-employment-service/pages/chat/components/fileIcon.vue

<template>
    <image v-if="type === 'application/pdf' || type === 'pdf'" :src="pdfIcon" class="file-icon" />
    <image
        v-else-if="
            type === 'application/msword' ||
            type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        "
        :src="docIcon"
        class="file-icon"
    />
    <image
        v-else-if="
            type === 'application/vnd.ms-powerpoint' ||
            type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation'||
            type === 'ppt' ||
            type === 'pptx' 
        "
        :src="pptIcon"
        class="file-icon"
    />
    <image v-else-if="type === 'text/markdown'" :src="mdIcon" class="file-icon" />
    <image v-else-if="type === 'text/plain'" :src="txtIcon" class="file-icon" />
    <image v-else-if="type === 'text/html'" :src="htmlIcon" class="file-icon" />
    <image
        v-else-if="
            type === 'application/vnd.ms-excel' ||
            type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'||
            type === 'xls' ||
            type === 'xlsx'
        "
        :src="excelIcon"
        class="file-icon"
    />
    <image v-else :src="otherIcon" class="file-icon" />
</template>

<script setup>
import pdfIcon from '@/static/file/pdf.png';
import docIcon from '@/static/file/doc.png';
import pptIcon from '@/static/file/ppt.png';
import mdIcon from '@/static/file/md.png';
import txtIcon from '@/static/file/txt.png';
import htmlIcon from '@/static/file/html.png';
import excelIcon from '@/static/file/excel.png';
import otherIcon from '@/static/file/other.png';

const props = defineProps({
    type: String,
});

const type = props.type;
</script>