更新记录

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

master

平台兼容性

uni-app(4.13)

其他

安装

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

组件关联说明

• xf-scss辅助样式
• xf-ts辅助样式
• xf-file-grid
• xf-fm-select
• xf-icon
• xf-button
• xf-uview-plus

  代码演示

基本用法

• 使用组件代码如下：

<template>
    <view>
        <xf-uploader-placeholder title="图片上传" v-model:fileList="formDataPh"></xf-uploader-placeholder>
    </view>
</template>

<script lang="ts" setup>
    import { computed, ref } from 'vue';
    import { FileStatus, XFFileModel } from '../../../uni_modules/xf-ts/type/type-xf';

    const formDataPh = ref<Array<XFFileModel>>([
        { url: 'https://cf-hz-test-01.xiaofengwang.com/order/orderNum/pic/%E8%AE%A2%E5%8D%95%E4%BF%A1%E6%81%AF_1760685017727_a_photo_3.jpeg', remarkName: '管路检测开始照片', id: null, status: FileStatus.Finished, type: 'image', source: ['album', 'camera'], isPlaceHolder: true },
        { url: '', remarkName: '设备链接照', id: null, status: FileStatus.None, type: 'image', source: ['album', 'camera'], isPlaceHolder: true },
        { url: '', remarkName: '管路检测结束照片', id: null, status: FileStatus.None, type: 'image', source: ['album', 'camera'], isPlaceHolder: true },
        { url: 'https://cf-hz-test-01.xiaofengwang.com/order/orderNum/pic/订单信息_1759999131952_cd119cd6e759abcb271fab4f83c59fa8.mp4', remarkName: '上传视频', id: 1, status: FileStatus.Finished, type: 'video', source: ['album', 'camera'], isPlaceHolder: true },
        { url: '', remarkName: '上传文件1', id: null, status: FileStatus.None, type: 'file', source: [], isPlaceHolder: true },
    ])

</script>

<style lang="scss" scoped>
    .main-view {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: $xf-page-bg;
        box-sizing: border-box;
    }
</style>

API

Props