附件下载组件 - IconFont组件

attachment 组件

<template>
  <div class="attachment-info" @click="download" title="下载">
    <IconFont colorful :icon="fileExtIcon" />
    <div>{{ fileInfo.name }}</div>
  </div>
</template>
<script>
import IconFont from "@/components/common/Iconfont/index.vue";
import * as commentSerivce from "@/services/document/comment";

export default {
  name: "AttachmentInfoView",
  props: {
    fileInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    fileExtIcon() {
      const fileSuffix = this.fileInfo.fileSuffix || this.fileInfo.file_suffix;
      if (["jpg", "jpeg", "gif", "bmp", "png"].includes(fileSuffix)) {
        return "img";
      } else if (["mp3", "wav"].includes(fileSuffix)) {
        return "music";
      } else if (["mp4", "avi"].includes(fileSuffix)) {
        return "video";
      } else if (["doc", "docx"].includes(fileSuffix)) {
        return "word";
      } else if (["rar", "zip"].includes(fileSuffix)) {
        return "rar";
      } else if (["xlsx", "xls"].includes(fileSuffix)) {
        return "excel-copy";
      } else if (["pdf", "ppt", "txt"].includes(fileSuffix)) {
        return fileSuffix;
      }
      return "unknowndoc";
    },
  },
  components: { IconFont },
  mounted() {},
  methods: {
    async download() {
      const res = await commentSerivce.downloadAttachment(this.fileInfo.id);
      var file = res.data;
      let fileName = decodeURIComponent(this.fileInfo.name);
      const blobUrl = URL.createObjectURL(file);
      const a = document.createElement("a");
      a.href = blobUrl;
      a.target = "_parent";
      a.download = fileName;
      (document.body || document.documentElement).appendChild(a);
      a.click();
      a.remove();
    },
  },
  setup(props, context) {
    return {};
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.attachment-info {
  font-size: 12px;
  color: #666b71;
  letter-spacing: 0;
  line-height: 18px;
  font-weight: 400;
  display: inline-flex;
  align-items: flex-start;
  cursor: pointer;
  & + .attachment-info {
    margin-top: 10px;
  }

  &:hover {
    color: $--color-primary;
  }

  svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
}
</style>

IconFont组件

//IconFont组件
<template>
  <svg v-if="colorful" :class="['iconfont-svg', customClass]" aria-hidden="true">
    <use :xlink:href="`#icon-${icon}`"></use>
  </svg>
  <i v-else :class="['iconfont', `icon-${icon}`, customClass]"></i>
</template>
<script>
export default {
  name: 'iconFont',
  props: {
    icon: String,
    colorful: {
      type: Boolean,
      default: () => false
    },
    customClass: {
      type: String,
      default: () => ''
    }
  }
}
</script>