caimei-authentic-www/components/DocIcon/index.vue

<template>
  <div class="doc-icon">
    <img :src="srcUrl" :width="width" :height="height" />
  </div>
</template>
<script>
import docIcons from './icons.js'
import suffix from './suffix'
export default {
  name: 'DocIcon',
  props: {
    width: {
      type: Number,
      default: 32,
    },
    height: {
      type: Number,
      default: 32,
    },
    type: {
      type: String,
      default: 'other',
    },
    src: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      docIcons,
      typeIndex: '',
    }
  },
  computed: {
    srcUrl() {
      return this.src ? this.src : this.docIcons[this.typeIndex]
    },
  },
  watch: {
    type: {
      immediate: true,
      handler: function () {
        if (suffix.video.includes(this.type)) {
          this.typeIndex = 'video'
        } else if (suffix.word.includes(this.type)) {
          this.typeIndex = 'word'
        } else if (suffix.ppt.includes(this.type)) {
          this.typeIndex = 'ppt'
        } else if (suffix.excel.includes(this.type)) {
          this.typeIndex = 'excel'
        } else if (this.docIcons[this.type]) {
          this.typeIndex = this.type
        } else {
          this.typeIndex = 'other'
        }
      },
    },
  },
}
</script>

<style scoped>
.doc-icon {
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
}

.doc-icon img {
  display: block;
}
</style>