更新记录

2.0.2（2022-09-17）

• 修复图片删除

2.0.1（2022-09-16）

• 修改文档

2.0.0（2022-09-16）

• 支持 Vue 3
• 图片数组支持对象元素
• 新增删除确认
• 解决了一些已知问题
• 调整为 uni_modules 目录规范

平台兼容性

图片拖拽排序插件

1. H5 和微信小程序已测试通过

2. App 和其他平台小程序未测试，大概率支持

3. 非uni_modules版本未更新

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',
        }
      ]
    }
  }
}

属性说明