更新记录
1.0.0(2023-12-07)
1.0.0 - 2023年12月07日
平台兼容性
HbuilderX/cli最低兼容版本 |
3.7.0 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
简介
有次为了做图片上传九宫格拖拽排序功能,一直在寻找一款能同时满足H5端和微信小程序端的拖拽排序组件,好像都没找到合适,无奈自己手动写一个,欢迎大家试用,并反馈问题,会及时回答并进行升级。具体示例可参考demos文件夹,后续demos会不断更新。
1、安装项目依赖
npm install lodash -S
2、将下载插件中的com-drag文件夹复制到项目components目录下
3、在需要用到的页面引入该组件
<template>
<com-drag
:list="list.length >= 9 ? list : list.concat([{ url: '', disabled: true }])"
:column="3"
field="label"
:item-height="250"
@update="setList"
>
<template #default="{ item }">
<view
class="item f-block f-center"
:class="{ 'item-uplaod': item.disabled }"
@click="handleClick(item)"
>
<image v-if="item.url" :src="item.url" style="width:240rpx;height:240rpx"></image>
<view v-else class="icon">+</view>
</view>
</template>
</com-drag>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import comDrag from '@/components/com-drag/com-drag.vue'
const list = ref([])
const handleClick = (item: any) => {
if (!item.url) {
uni.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: ({ tempFilePaths, tempFiles }) => {
// ToDo...[upload code]
tempFiles.map(i => {
list.value.push({
url: i.path,
size: i.size
})
})
console.log(tempFilePaths, tempFiles)
}
// fail: error => {}
})
}
}
const setList = (l: any[]) => {
console.log('l', l)
// list.value = l
}
</script>
<style lang="scss">
.item {
height: 250rpx;
box-sizing: border-box;
.icon {
font-size: 100rpx;
}
&-upload {
border: 1rpx solid #ccc;
}
}
</style>
4、组件props、slot 及事件说明
props
参数 |
类型 |
必填项 |
默认值 |
说明 |
list |
any[] |
是 |
[] |
要排序的列表数据 |
field |
string |
否 |
'id' |
列表item数据的key,需唯一 |
column |
number |
否 |
1 |
一行几列 |
listWidth |
number |
否 |
750[代表充满屏幕] |
列表宽度, 单位rpx |
itemHeight |
number |
是 |
|
item高度, 单位rpx |
itemInnerStyle |
object |
否 |
|
item自定义样式 |
slot 默认插槽
<template #default="{ item, index }">
<view>{{item}}</view>
</template>
事件
@update 排序完后的列表数据