更新记录

1.0.0（2026-01-07） 下载此版本

master

平台兼容性

uni-app(4.13)

其他

安装

在市场导入xf-file-griduni_modules版本的即可，无需import

组件关联说明

• xf-scss辅助样式
• xf-ts辅助样式
• xf-file-grid
• xf-fm-select

代码演示

基本用法

• 使用组件代码如下：

<template>
    <view class="xf-col">
        <xf-file-list bottomTip="副标题" tip="内容显示" :dataList="dataList"></xf-file-list>
    </view>
</template>

<script lang="ts" setup>
    import { computed } from 'vue';

    const dataList = computed(() => {
        return [
            { url: 'https://cf-hz-test-01.xiaofengwang.com/order/orderNum/pic/%E8%AE%A2%E5%8D%95%E4%BF%A1%E6%81%AF_1759996941888_a_photo_3.jpeg', name: 'a_photo_3', ext: 'jpeg' },
            { url: 'https://cf-hz-test-01.xiaofengwang.com/order/orderNum/pic/订单信息_1759997264202_react-natvie原生应用中集成RN.docx', name: '原生应用中集成RN.docx', ext: 'docx' },
            { url: 'https://cf-hz-test-01.xiaofengwang.com/order/orderNum/pic/%E8%AE%A2%E5%8D%95%E4%BF%A1%E6%81%AF_1764916341247_%E5%BB%BA%E7%AD%91%E5%B7%A5%E7%A8%8B%E7%BB%BC%E5%90%88%E6%89%8B%E5%86%8C.pdf', name: '建筑工程综合手册.pdf', ext: 'pdf' },
            { url: 'https://cf-hz-test-01.xiaofengwang.com/order/orderNum/pic/订单信息_1759997264202_react-natvie原生应用中集成RN.docx', name: '原生应用中集成RN.xls', ext: 'xls' },
            { url: 'https://cf-hz-test-01.xiaofengwang.com/order/orderNum/pic/订单信息_1759997288315_25337000000476126375_杭州炳炳其章网络科技有限公司.pdf', name: '杭州炳炳其章网络科技有限公司.pdf', ext: 'pdf' },
            { url: 'https://cf-hz-test-01.xiaofengwang.com/user/avatar/102909/1748586306866_E553BB31-E148-4C02-BE77-0737B978FE03.jpeg', name: '这是一张图片', ext: 'jpeg' },
            { url: 'https://cf-hz-dev-01.xiaofengwang.com/order/S202507030005/pic/%E7%A6%BB%E5%9C%BA%E7%85%A7_1751521064559_IMG_7p2Ryj.jpg', name: '这是一张图片这是一张图片这是一张图片这是一张图片', ext: 'jpeg' },
            { url: 'https://cf-hz-test-01.xiaofengwang.com/order/orderNum/pic/订单信息_1759999131952_cd119cd6e759abcb271fab4f83c59fa8.mp4', name: 'cd119cd6e759abcb271fab4f83c59fa8.mp4', ext: 'mp4' },
            { url: 'https://cf-hz-pre-01.xiaofengwang.com/user/identity/general/1765442604214_d.zip', name: 'xxx.zip', ext: 'zip' },
        ]
    })
</script>

API

Props