SpFile 文件

文件展示容器，可以显示基础的文件信息、文件下载等操作

基础用法

<script setup>
import { ref } from 'vue';
const fileList = ref([
  {
    name: '产品说明书.pdf',
    size: 23548685,
  },
  {
    name: '2023年第3季度报表.pdf',
    size: 235486,
  },
]);
</script>

<template>
  <SpFile v-for="file in fileList" :file-name="file.name" :file-size="file.size"></SpFile>
</template>

产品说明书.pdf

22.46 M

2023年第3季度报表.docx

229.97 K

启用文件下载

传入 download-url 属性即可，组件会出现下载按钮，点击下载按钮后会按照 file-name 的名字下载文件。

<template>
  <SpFile :file-name="file.name" :file-size="file.size" :download-url="file.downloadUrl" />
</template>

自定义按钮

<script setup>
import { ref } from 'vue';
const fileList = ref([
  {
    name: '产品说明书.pdf',
    size: 23548685,
  },
  {
    name: '2023年第3季度报表.pdf',
    size: 235486,
  },
]);
</script>

<template>
  <SpFile v-for="file in fileList" :file-name="file.name" :file-size="file.size">
    <template #fileOperate>
      <ElSwitch v-model="file.isEnabled" />
    </template>
  </SpFile>
</template>

产品说明书.pdf

22.46 M

2023年第3季度报表.docx

229.97 K

组件大小

<script setup>
import { ref } from 'vue';
const fileList = ref([
  {
    name: '产品说明书.pdf',
    size: 23548685,
  },
  {
    name: '2023年第3季度报表.pdf',
    size: 235486,
  },
]);
</script>

<template>
  <SpFile v-for="file in fileList" :file-name="file.name" :file-size="file.size" small>
    <template #fileOperate>
      <ElSwitch v-model="file.isEnabled" />
    </template>
  </SpFile>
</template>

产品说明书.pdf

22.46 M

2023年第3季度报表.docx

229.97 K

API

SpFile 属性

属性名	说明	类型	默认值
fileName	文件名	string	-
fileSize	文件大小，单位：bytes	number	-
isDeleted	是否已删除 0-否 1-是	0 | 1	-
percentage	进度条进度，需要传入 0 ~ 100 的数字	number	-
downloadUrl	文件下载地址	string	-
thumbnailUrl	缩略图地址，如果不传则不会显示缩略图。如果传了，会通过 fileName 进行判断是否支持预览，不支持也不会显示缩略图	string	-
deleteEnabled	启用删除功能	boolean	false
small	是否启用小组件样式	boolean	false

SpFile 事件

事件名	说明	类型
delete	确认删除事件	() => void

SpFile 插槽

插槽名	说明
fileOperate	文件拓展操作插槽，可以扩充一些内容