GraceUI 多图选择组件



多图选择组件

组件介绍

GraceUI 多图选择组件以 uni.chooseImage 接口为基础，实现了多图选择、展示、预览、删除等功能；

组件名称

gui-choose-images : GraceUI 组件目录/gui-choose-images.vue

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
maxFileNumber	Number	9	最大图片选择数量
btnName	String	添加图片	添加图片按钮文本
items	Array	[]	默认图片数据
removeBtnColor	String	rgba(0, 0, 0, 0.8)	删除按钮颜色
imgMode	String	widthFix	图片 mode 属性值
sourceType	Array	['album', 'camera']	图片来源 album ：相机，camera 摄像头
borderRadius	String	10rpx	图片列表圆角尺寸

组件事件

01. change
当图片数据发生变化时会触发组件的 change 事件，并传递数组形式的图片数据;
数据格式 ：
[
    {
        "url" : "图片临时文件或已上传的文件路径",
        "progress" : "上传进度，新添加为 0，已上传 100",
        "data":"uni.chooseImage api 接口返回数据 tempFiles 字段数据" // 2023.07.31 新增
    }
]

02. removeImg
删除某个图片时触发，携带被删除的图片数据;

重要说明

微信小程序端需要用户授权，教程：
https://www.lesscode.work/sections/0735aed114050bfc76953849840b05ca.html

演示代码

UNI 普通版本

NVUE 版本

登录并购买 GraceUI 后可以查阅完整手册内容。