vue elementui 实现图片上传后拖拽排序功能

本文分享了如何使用Vue2、ElementUI和vuedraggable实现图片上传后拖拽排序功能的组件封装。详细介绍了需求分析、实现思路、关键处理点如图片删除、预览和数量限制,以及组件的使用方式和源码。同时,还提供了vue3语法的封装方法和常见问题解决方案。
摘要由CSDN通过智能技术生成

很久没写技术博客了,今天是春节假期前最后一天上班,没什么事情,就随便写写吧,这次就分享一下之前封装的一个图片上传组件的实现过程,这里主要分享下拖拽排序功能的一种实现方式。
在这里插入图片描述

  • 2021-11-17 更新:
    文末附完整源码及使用示例代码

  • 2021-08-30 更新:
    新增vue3支持组件,采用script setup语法+ts语言,并拓展了一些功能,代码见文章末尾。

1、主要技术栈

vue2、elementui2、vuedraggable2

2、需求分析

产品的要求就是多图上传完后,可以对图片列表进行拖拽排序。本身elementui的el-upload组件已经支持很多功能,但是唯独没有拖拽排序,它的多图上传是按你上传时选择的文件的顺序来展示。

一般产品提出的复杂功能咱开发人员都是尽量简化或者砍掉哈哈,不过呢这个功能还是对用户非常友好的,秉承着用户至上的原则那就接下吧。

3、思路

要是用原生js手写一个拖拽功能做起来会很复杂,h5的draggable原生api有点鸡肋,很难实现一个比较好的交互效果,用js的mouseover不错,但是要实现最终完整的交互效果还是很费时间精力,所以还是找插件吧,通过拖拽插件和el-upload结合实现。

然后网上找到一个vuedraggable插件,github传送门,看demo效果还可以,那么问题来了,vuedraggable的使用方式是这样的:

<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{
   {
   element.name}}</div>
</draggable>

就是通过slot插槽的方式传递列表,只对插槽内第一层级的元素起作用。而el-upload使用上传后生成的列表是动态生成的且无法手动控制,也就是说vuedraggable无法作用到el-upload生成的图片列表,那就放弃使用el-upload的图片列表,自己手动写个列表盒子来展示图片,并把这个列表放在vuedraggable组件插槽中,上传完后把获取的url地址赋值过去。
DOM结构大概如下:

<vuedraggable tag="ul" draggable=".draggable-item">
   <!-- 拖拽元素 -->
   <li
     v-for="(item, index) in imgList"
     :key="item + index"
     class="draggable-item"
   >
     <el-image :src="item" :preview-src-list="[item]"><
评论 77
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值