113 lines
2.9 KiB
Markdown
113 lines
2.9 KiB
Markdown
|
# 图片拖拽排序插件
|
||
|
|
<font color='red'>1. H5 和微信小程序已测试通过</font>
|
||
|
|
|
||
|
|
<font color='red'>2. App 和其他平台小程序未测试，大概率支持</font>
|
||
|
|
|
||
|
|
<font color='red'>3. 非uni_modules版本未更新</font>
|
||
|
|
|
||
|
|
## shmily-drag-image
|
||
|
|
|
||
|
|
> 点击预览、长按拖拽排序、自定义添加图片、删除确认、支持对象数组
|
||
|
|
|
||
|
|
## 预览
|
||
|
|
您可以通过微信扫码，查看最佳的演示效果。
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## 基本使用：
|
||
|
|
|
||
|
|
```
|
||
|
|
<shmily-drag-image v-model="list"></shmily-drag-image>
|
||
|
|
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
list: [
|
||
|
|
'http://web.shmily.ren/shmily-drag-image/static/1.jpg',
|
||
|
|
'http://web.shmily.ren/shmily-drag-image/static/2.jpg',
|
||
|
|
'http://web.shmily.ren/shmily-drag-image/static/3.jpg',
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 自定义添加、删除确认：
|
||
|
|
```
|
||
|
|
<shmily-drag-image v-model="list" :addImage="addImage" :delImage="delImage"></shmily-drag-image>
|
||
|
|
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
list: [
|
||
|
|
'http://web.shmily.ren/shmily-drag-image/static/1.jpg',
|
||
|
|
'http://web.shmily.ren/shmily-drag-image/static/2.jpg',
|
||
|
|
'http://web.shmily.ren/shmily-drag-image/static/3.jpg',
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
addImage() {
|
||
|
|
// 将图片地址添加到图片数组
|
||
|
|
this.list.push('http://web.shmily.ren/shmily-drag-image/static/4.jpg')
|
||
|
|
},
|
||
|
|
delImage(done) {
|
||
|
|
uni.showModal({
|
||
|
|
content: '是否删除?',
|
||
|
|
success: (res) => {
|
||
|
|
if(res.confirm) {
|
||
|
|
// 执行 done() 删除
|
||
|
|
done()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 支持对象数组：
|
||
|
|
```
|
||
|
|
<shmily-drag-image v-model="list" keyName="src"></shmily-drag-image>
|
||
|
|
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
src: 'http://web.shmily.ren/shmily-drag-image/static/1.jpg',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
src: 'http://web.shmily.ren/shmily-drag-image/static/2.jpg',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
src: 'http://web.shmily.ren/shmily-drag-image/static/3.jpg',
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 属性说明
|
||
|
|
|
||
|
|
属性名 | 类型 | 默认值 | 说明
|
||
|
|
:-:|:-:|:-:|---
|
||
|
|
v-model | Array | [ ] | 图片数组，元素为图片地址字符串或对象，默认为`Array<String>`
|
||
|
|
keyName | String | null | 从图片数组元素对象中读取的键名
|
||
|
|
number | Number | 6 | 图片数量限制
|
||
|
|
imageWidth | Number | 0 | 图片父容器宽度（实际显示的图片宽度为 imageWidth / 1.1 ），单位 rpx。imageWidth > 0 则 cols 无效
|
||
|
|
cols | Number | 3 | 图片列数
|
||
|
|
borderRadius | Number | 0 | 图片圆角，单位 rpx
|
||
|
|
padding | Number | 10 | 图片周围空白填充，单位 rpx
|
||
|
|
scale | Number | 1.1 | 拖动图片时放大倍数 [0, ∞)
|
||
|
|
opacity | Number | 0.7 | 拖动图片时不透明度
|
||
|
|
addImage | Function | null | 自定义添加，见上方示例
|
||
|
|
delImage | Function | null | 删除确认，见上方示例
|
||
|
|
|