xiaoshu/src/components/file/FileNameDisplay.vue

<template>
    <div class="file-name-display" :class="{'file-name-pdf': is_pdf, 'file-name-others': !is_pdf}">
        <span class="file-name-icon"><img :src="img_src"/></span>
        <span class="file-name-label">{{file_name}}</span>
    </div>
</template>
<script setup>
import icon_excel from '../../assets/files/excel.svg';
import icon_word from '../../assets/files/word-01.svg';
import icon_pdf from '../../assets/files/pdf.44344347.svg';

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

/**
 * 文件后缀名
 */
const file_endfix = (function(){
    const arr = props.file_name.split('.');

    const str = arr[arr.length - 1]

    return str;
})();

const is_pdf = file_endfix === 'pdf';

const icon_map = {
    docx: icon_word,
    doc: icon_word,
    pdf: icon_pdf,
}

const img_src = icon_map[file_endfix];

</script>
<style scoped>
.file-name-display{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.file-name-pdf{
    cursor: pointer;
}
.file-name-others{
    cursor: default;
}

.file-name-icon{
    display: inline-block;
    margin-right: 3px;
    /* height: 22px; */
    width: 22px
}

.file-name-icon img{
    width: 100%;
}

.file-name-label{
    color: blue;
}
</style>