文件预览组件

@beisen-phoenix/file-list

概述

显示文件预览的组件，此组件仅负责展示，没有内置功能。配合上传组件，可以组成上传加预览的功能

默认导出块状文件列表组件，同时导出条状文件列表组件（ListView），以及条状文件预览组件（ListItem）用于支持对单个文件的操作权限进行自定义

API

default 和 ListView

名称	说明	类型	默认值	是否必须
files	文件列表	IPreviewItemFile[]	-	是
edit	列表是否可编辑，显示删除，下载按钮	boolean	-	否
onDelete	点击删除按钮的回调，需要实现删除逻辑并更新 files 的值	(fileData: IPreviewItemFile) => void	-	否
onDownload	点击下载按钮的回调，需要实现下载逻辑	(fileData: IPreviewItemFile) => void	-	否
onClick	点击除删除和下载之外区域的事件回调	(fileData: IPreviewItemFile) => void	-	否
width	列表模式下可用，控制每项的宽度	string	`230px`	否
margin	列表模式下可用，控制文件列表的margin值，object类型,分别包含top、bottom、left、right值	object		否
layout	列表模式下可用，控制列表展示的方向	EListLayout	`EListLayout.vertical`	否
lang	当前语言环境(zh_CN,en_US,zh_TW)	string	`zh_CN`	否
translation	自定义语言包，详情见下方	object	-	否
isHideRootNode	是否隐藏 list 外部的根节点	boolean	`false`	否

ListItem

名称	说明	类型	默认值	是否必须
file	文件	IPreviewItemFile	-	是
edit	列表是否可编辑，显示删除，下载按钮	boolean	-	否
onDelete	点击删除按钮的回调，需要实现删除逻辑并更新 files 的值	(fileData: IPreviewItemFile) => void	-	否
onDownload	点击下载按钮的回调，需要实现下载逻辑	(fileData: IPreviewItemFile) => void	-	否
onClick	点击除删除和下载之外区域的事件回调	(fileData: IPreviewItemFile) => void	-	否
width	列表模式下可用，控制每项的宽度	string	'230px'	否
layout	列表模式下可用，控制列表展示的方向	EListLayout	`EListLayout.vertical`	否
disable	列表模式下可用，控制列表是否为禁用态，禁用态下文件名和图标置灰，不可点击预览	boolean	`false`	否
downloadable	列表模式下可用，控制列表是否可下载，若为 false，则文件不可下载	boolean	`true`	否
showOverflowTooltip	列表模式下可用，控制列表是否可展示 tips，默认为 true，文字溢出时展示 tips，若为 false，则文件始终不展示 tips	boolean	`true`	否
isShowPreviewIcon	是否显示前置预览按钮	boolean	``	否
isPreviewFileName	是否可点击标题预览	boolean	``	是

相关说明

文件数据

export interface IPreviewItemFile extends IUploadFileType {
  deletable?: boolean;
  isShowFileNameWhenError?: boolean; // 控制当文件上传 status 为 error 时，是否显示文件名
}

interface IUploadFileType {
  name: string; // 文件名称
  status: EStatus; // 文件状态
  mediaType: string; // 文件类型
  previewUrl?: string; // 文件预览地址
  downloadUrl?: string; // 文件下载地址
  percent?: number; // 文件上传进度
  raw?: File; // 源文件对象
  id?: string; //后端文件id
  lid?: string; //前端生成的临时id
  clientUrl?: string; // 预览地址（当图片的小图展示地址和点击预览地址不一致时可用）
}

列表布局方向

export enum EListLayout {
  vertical = 'vertical',
  horizontal = 'horizontal'
}

多语言翻译

translation: {
  fail: '上传错误',
  success: '上传成功'
}

关于 lid 与 id

在文件被选中并且没有上传完成的过程中，需要给文件数据一个标识，所以会临时生成一个 lid = 文件名 + 时间戳，当文件上传完成并且后端返回文件对象之后，建议给文件数据追加上 id 作为后续操作的标识