更新记录
1.0.0(2026-01-07)
下载此版本
master
平台兼容性
uni-app(4.13)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
√ |
√ |
√ |
√ |
- |
√ |
√ |
√ |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
其他
安装
在市场导入xf-file-griduni_modules版本的即可,无需import
组件关联说明
代码演示
基本用法
<template>
<view class="file-main xf-col">
<xf-file-grid
:dataList="props.dataList"
:itemCount="props.itemCount"
:gridColumnGap="props.gridColumnGap"
:gridRowGap="props.gridRowGap"
:showItemLabel="props.showItemLabel"
:showDelete="false"
:showUploadStatus="false"
@preview="handlePreview"
ref="fileGridRef">
</xf-file-grid>
</view>
</template>
API
Props
| 属性名 |
说明 |
类型 |
默认值 |
| dataList |
文件列表 |
array<XFFileModel> |
- |
| itemCount |
grid布局一行显示几个item |
number |
4 |
| gridColumnGap |
列间距 |
number |
10 |
| gridRowGap |
行间距 |
number |
10 |
| showItemLabel |
是否显示文件名称 |
boolean |
false |
| showDelete |
是否添加删除按钮 |
boolean |
false |
| showUploadStatus |
是否显示上传状态遮罩 |
boolean |
false |
API
事件 Emits
| 名称 |
说明 |
返回值 |
| preview |
预览回调 |
|
| delete |
删除回调 |
|
| retry |
重新上传回调 |
|