更新记录

1.0.0（2023-12-07）

1.0.0 - 2023年12月07日

平台兼容性

简介

有次为了做图片上传九宫格拖拽排序功能，一直在寻找一款能同时满足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

slot 默认插槽

<template #default="{ item, index }">
  <view>{{item}}</view>
</template>

事件

@update 排序完后的列表数据