FileList 文件列表
用于展示文件列表，自动识别文件后缀展示对应图标，支持列表模式、小卡片模式和大卡片模式。图片类型文件在卡片和大卡片模式下可直接展示缩略图预览。
综合示例
包含模式切换、文件选择、Modal 删除确认弹窗、点击下载等完整交互。
项目文件
产品截图.png
团队合照.jpg
年度报告.pdf
数据统计.xlsx
需求文档.docx
演示文稿.pptx
项目源码.zip
数据库备份.sql
架构图.svg
当前模式：grid已选中 0 项：
基础用法
通过 files 属性传入文件列表，自动识别文件后缀展示对应图标。
年度报告.pdf
数据统计.xlsx
需求文档.docx
演示文稿.pptx
配置文件.json
背景图片.png
项目源码.zip
数据库备份.sql
小卡片模式
设置 mode 为 grid 切换为小卡片网格布局，紧凑展示图标与文件名。
年度报告.pdf
数据统计.xlsx
需求文档.docx
演示文稿.pptx
配置文件.json
背景图片.png
项目源码.zip
数据库备份.sql
大卡片模式
设置 mode 为 card 切换为大卡片模式。图片类型文件（jpg/png/gif/svg等）会直接展示缩略图预览，其他类型展示大图标。
产品截图.png
团队合照.jpg
年度报告.pdf
架构图.svg
数据统计.xlsx
用户头像.png
模式切换
设置 showModeToggle 显示列表/小卡片/大卡片模式切换按钮，mode 支持 v-model 双向绑定。
产品截图.png
团队合照.jpg
年度报告.pdf
架构图.svg
数据统计.xlsx
用户头像.png
当前模式：list
可选择
设置 selectable 启用文件选择，通过 v-model 绑定已选中项的 uid 列表，支持列表和卡片模式。
年度报告.pdf
数据统计.xlsx
需求文档.docx
演示文稿.pptx
配置文件.json
背景图片.png
项目源码.zip
数据库备份.sql
已选中 0 项：
带标题与日期
通过 header 属性设置列表头部标题，设置 show-date 显示文件日期信息。
项目文档
会议纪要.docx
设计方案.pdf
源代码.zip
数据库备份.sql
删除确认
监听 remove 事件，使用 NModal 对话框确认后再执行删除操作。
可删除文件
旧版报告.pdf
废弃数据.xlsx
临时文件.zip
自定义图标映射
通过 icons 属性自定义文件后缀与图标的映射关系。
README.md
server.yml
app.py
自定义插槽
通过 #file-icon、#file-name、#file-actions 插槽自定义文件项的展示内容。
📕
年度报告.pdf
📊
数据统计.xlsx
📝
需求文档.docx
📽️
演示文稿.pptx
📄
配置文件.json
📄
背景图片.png
📄
项目源码.zip
📄
数据库备份.sql
FileList Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
files | FileItem[] | [] | 文件列表数据 |
mode | 'list' | 'grid' | 'card' | 'list' | 展示模式：列表 / 小卡片 / 大卡片 |
header | string | - | 列表头部标题 |
selectable | boolean | false | 是否可选择文件 |
modelValue | (string | number)[] | [] | 已选中文件的 uid 列表，支持 v-model |
showSize | boolean | true | 是否显示文件大小 |
showDate | boolean | false | 是否显示文件日期 |
showActions | boolean | true | 是否显示操作按钮 |
showModeToggle | boolean | false | 是否显示列表/小卡片/大卡片模式切换 |
icons | Record<string, string> | {} | 自定义文件后缀到图标名的映射 |
colorfulIcons | string[] | [] | 额外要使用彩色 SVG 的扩展名列表（内置已有 37 种） |
emptyText | string | '暂无文件' | 空状态提示文字 |
FileList Events
| 事件名 | 参数 | 说明 |
|---|---|---|
update:mode | (mode: 'list' | 'grid' | 'card') | 模式切换时触发 |
update:modelValue | (keys: (string|number)[]) | 选择变化时触发 |
file-click | (file: FileItem) | 点击文件时触发（可用于下载/预览） |
select | (file: FileItem, selected: boolean) | 选择/取消选择时触发 |
remove | (file: FileItem, index: number) | 点击删除按钮时触发（需自行实现删除逻辑） |
FileList Slots
| 插槽名 | 参数 | 说明 |
|---|---|---|
header | - | 列表头部自定义内容 |
file-icon | { file, ext, iconName } | 文件图标自定义 |
file-name | { file } | 文件名自定义 |
file-actions | { file } | 操作按钮区域自定义 |
FileItem 数据结构
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
uid | string | number | - | 文件唯一标识（用于选择） |
name | string | - | 文件名（含扩展名，用于自动推断图标） |
size | number | - | 文件大小（字节，自动格式化为 KB/MB） |
date | string | - | 文件日期字符串 |
url | string | - | 文件下载/预览地址（卡片模式下图片直接展示预览缩略图） |
type | string | - | 自定义文件 MIME 类型（可覆盖自动推断，如 image/png） |
FileListItem Slots
| 插槽名 | 参数 | 说明 |
|---|---|---|
icon | { file, ext, iconName } | 文件图标（FileListItem 内部） |
name | { file } | 文件名（FileListItem 内部） |
actions | { file } | 操作区域（FileListItem 内部） |