更新记录
1.0.1(2024-06-03) 下载此版本
无数据时,添加按钮去除marginTop
1.0.0(2024-05-31) 下载此版本
初始化
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
注意事项
注意事项
本组件使用了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=4059834961,212785786&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=3900322681,4149328919&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
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
timestamp | Number | null | 时间戳,用于刷新组件 |
dataList | Array | - | 数据 |
bgColor | String | #D4E5EF | 组件背景色 |
width | Number | 690 | 组件宽度,单位:rpx,需传入数值型 |
paddingLeft | Number | 30 | 组件padding-left,padding-right同padding-left, 单位:rpx,需传入数值型 |
paddingTop | Number | 30 | 组件padding-top,padding-bottom同padding-top, 单位:rpx,需传入数值型 |
radius | String | 10rpx | 组件圆角 |
imageRadius | String | 10rpx | 图片圆角 |
imageGap | Number | 30 | 图片间距,单位:rpx,需传入数值型 |
addIconTheme | String | #354E6B | 添加图标主题 |
addIconBorderStyle | String | dashed | 添加图标边框类型,可选项:'solid', 'dotted' |
showAdd | Boolean | true | 是否显示添加按钮 |
showDelete | Boolean | true | 是否显示删除按钮 |
colNum | Number | 4 | 图片列数 |
Events
事件名 | 说明 | 返回值 |
---|---|---|
add | 添加事件 | 返回选择的图片路径 |
delete | 删除事件 | 返回删除图片对应的下标 |