基于VueDraggable和Element-ui的图片拖拽改变顺序的组件

我们公司管理后台项目是使用Element-ui组件,这次需求产品要求上传的图片组允许拖拽排序,我就想用vue-draggable插件了,但是相信Element-ui的el-upload组件封装的很好,我这种菜鸟级别的前端哪里敢动,所以我就想着上传依然用el-upload,但是把上传组件的展示图片隐藏,自己根据组件的上传之后拿到的url链接自己形成图片数组,然后展示层由我们自己来写UI和vue-draggable的拖拽,话不多说,上代码,直接莽!

emmm...先来两张效果图吧

基于VueDraggable和Element-ui的图片拖拽改变顺序的组件_第1张图片

基于VueDraggable和Element-ui的图片拖拽改变顺序的组件_第2张图片



调用例子


 

你可能感兴趣的:(vue,Element-ui,VueDraggable,vue,Element-ui,VueDraggable)