wisdomcity-office/src/components/view_file/components/vendors/other/index.vue

<!--
 * @Author: ChenYaJin
 * @Date: 2021-06-16 14:46:07
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2025-04-15 15:37:16
 * @Description: 文件柜-预览其他
-->
<template>
  <div class="view-other">
    <el-image :src="viewOffImage" class="view-off-icon">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
      <p>{{file.name}}.{{file.type}}<span class="size-item">{{getFileSize}}</span></p>
      <p><big><strong>该类型文件不支持在线预览，请下载后查看。</strong></big></p>
  </div>
</template>
<script>
import commJs from '@/comm_js/index'
import viewOffImage from '../../../assets/view_off.svg'

export default {
  name: 'ViewOtherComponent',
  props: {
    file: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      viewOffImage
    }
  },
  computed: {
    getFileSize () {
      return commJs.fileSizeFormat(this.file.size, 'KB')
    }
  },
  methods: {
  },
  mounted () {
  }
}
</script>
<style lang="less" scoped>
.view-other {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  .size-item {
    margin-left: 10px;
  }
}

</style>