图片拖拽排序插件(九宫格模式) - 更新日志

1.0.4(2019-08-10)

优化监听重新初始化

1.0.3(2019-07-29)

  • 优化更新初始化

1.0.2(2019-07-29)

修复因图片数量改变时,拖拽区高度变化导致无法拖拽的问题

1.0.1(2019-07-25)

主要更新:

  • 优化图片上传后的视图更新
  • 修复当图片数组list没有值时,上传图片后无法拖拽的问题

其他

  • 该插件开发完后,使用该功能的项目也因某些原因搁置了,所以一直没去测试和优化,还是存有一些小问题,也感谢各位开发者的建议和反馈
  • 该插件一开始只是给自己公司的项目使用的,严格上来讲还不能算是一个合格的插件,上传上来也只是给其他需要使用到该功能的开发者一个参考
  • 该插件不支持H5,H5还是推荐使用vue.draggable插件,https://www.npmjs.com/package/vuedraggable,体验、性能以及拓展性都要好一些

1.0.0(2019-07-11)

图片拖拽排序插件(九宫格模式)

image-drag-sort

由于公司的项目需要用到上传图片并且可以拖拽排序的功能,所以自己写了这个组件,主要用于上传图片前的编辑,目前限制最多展示9张图片。 自用,没有什么可选性,不确保完美无bug。 需要修改样式或者图片限制的,只需改一下代码即可。 使用过程中如有什么问题或者改进建议的,请在评论区留言。

使用方式:

在 script 中引用组件

import imageDragSort from "@/components/image-drag-sort/index.vue"
export default {
    data() {
        return {
            images: []
        }
    },
    components: {
        imageDragSort
    }
}

在 template 中使用组件

<image-drag-sort :list="images"></image-drag-sort>

属性名 类型 默认值 说明
list Arrar [] 图片地址列表