图片拖拽排序插件(九宫格模式) - 更新日志
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 | [] | 图片地址列表 |