更新记录

1.0.1（2024-06-03） 下载此版本

无数据时，添加按钮去除marginTop

1.0.0（2024-05-31） 下载此版本

初始化

平台兼容性

uni-app

其他

注意事项

注意事项 本组件使用了uni-icons, 请在使用前先引用uni-icons组件。

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

在 template 中使用组件

<spring-upload-images :dataList="list" :timestamp="timestamp" @delete="handleDelete"
    @add="handleAdd"></spring-upload-images>

只展示

<spring-upload-images :dataList="list" :timestamp="timestamp" :showAdd="false"
    :showDelete="false"></spring-upload-images>

列数 （3~5列显示效果较好）

    <spring-upload-images :dataList="list" :timestamp="timestamp" :colNum="4" :showAdd="false"
    :showDelete="false"></spring-upload-images>

export default {
    data() {
        return {
            timestamp: null,
            list: [
                'https://img0.baidu.com/it/u=896214020,274705695&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
                'https://img1.baidu.com/it/u=1525863820,412013966&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                'https://img1.baidu.com/it/u=2628163247,2012453688&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422',
                'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0609%2Fc32b0506j00rd6off0057c000hs0107c.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
                'https://t10.baidu.com/it/u=405983496***&fm=30&app=106&f=JPEG?w=640&h=452&s=E06F9F504A29770D2653D8C3030070BA',
                'https://img2.baidu.com/it/u=4098249777,486439476&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
                'https://img2.baidu.com/it/u=3256616248,1972425356&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1039',
                'https://img0.baidu.com/it/u=1637052696,1362451737&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=500',
                'https://img1.baidu.com/it/u=2149858462,2019272321&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
                'https://img1.baidu.com/it/u=390032268***9&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
                'https://img1.baidu.com/it/u=4202910209,3404829898&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800'
            ]
        }
    },
    onLoad() {
        uni.setNavigationBarTitle({
            title: '列数'
        })
        // 此处timestamp是为了操作后刷新组件
        this.updateTimestamp()
    },
    methods: {
        handleDelete(e) {
            this.list.splice(e, 1)
            this.updateTimestamp()
        },

        handleAdd(e) {
            // 示例
            this.list.push(e)
            // 实际调用后台上传接口返回图片地址，再push到list中
            // 处理添加的逻辑

            this.updateTimestamp()
        },

        updateTimestamp() {
            this.timestamp = new Date().getTime()
        }
    }
}

API

Props

Events