smartai2dian0/src/modules/file-name/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 './files/excel.svg';
import icon_word from './files/word-01.svg';
import icon_pdf from './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: 16px;
  flex-shrink: 0;
}

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

.file-name-label {
  color: blue;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 这里设置显示的行数 */
  line-clamp: 1;
  overflow: hidden;
}
</style>