upload上传功能加入可拖拽
<el
-upload
ref
="upload"
:on
-change
="handleChange"
:on
-remove
="handleRemove"
:drag
="uploadData.drag"
:file
-list
="fileList"
:show
-file
-list
="uploadData.showList"
:action
="host"
:auto
-upload
="uploadData.autoUpload"
:data
="formData"
:on
-exceed
="changeExceed"
:limit
="uploadData.limit"
:accept
="uploadData.accept"
:multiple
="uploadData.multiple"
:list
-type
="uploadData.listType"
class="upload-demo"
v
-if="uploadSuccessFilesList.length < uploadData.limit"
>
<div
class="upload-content-box" v
-if="uploadData.diy">
<i
class="el-icon-circle-plus-outline"></i
>
<div
class="el-upload__text">添加上传图片
</div
>
</div
>
<el
-button
v
-else
:icon
="uploadData.btnIcon ? uploadData.btnIcon : ''"
v
-db
-click
type
="text"
>{{uploadData
.title
? uploadData
.title
: '上传图片'}}</el
-button
>
<!-- <el
-button
v
-db
-click
slot
="trigger"
type
="primary"
>{{ uploadData
.name
? uploadData
.name
: '选取文件' }}</el
-button
>-->
</el
-upload
>
这里加入一些自定义的文字或者图片，具体el-upload的参数以及上传的函数，我就不细说了。
加入可拖拽vuedraggable
<draggable
v
-show
="uploadData.listShow ? uploadData.listShow : false"
v
-model
="uploadSuccessFilesList"
class="el-upload-list el-upload-list--picture-card"
element
="ul"
@update
="draggableUpdate"
@start
="draggableStart"
>
<li
v
-for="(item, index) in uploadSuccessFilesList"
:key
="index"
tabindex
="0"
:class="'el-upload-list__item' + (uploadData.diy? '' : ' diy-list__item')"
@click
="changeImg(index)"
>
<el
-image
style
="width: 100%; height: 100%"
class="preview-img"
:src
="item"
:preview
-src
-list
="uploadSuccessFilesList"
></el
-image
>
<div
class="handle-icon">
<i
style
="font-size: 12px; color: #fff;"
class="el-icon-delete"
@click
="clickImgDelete(index)"
/>
</div
>
<span v
-if="uploadData.title && index === 0" class="pic-title">{{uploadData
.title
}}</span
>
</li
>
</draggable
>
这里把el-upload自带的照片墙改变了一下。
拖拽数据处理
draggableUpdate(data
, index
) {
},
draggableStart(data
) {
}
图片删除操作
this.uploadSuccessFilesList
.splice(index
, 1, null);
this.uploadSuccessFilesList
= this.uploadSuccessFilesList
.filter(
(item
) => {
return item
!== null;
}
);
this.$emit("delImg", this.uploadSuccessFilesList
, index
);
最后附上自己的样式
.upload
-box
{
display
: flex
;
}
.el
-upload
-list
{
margin
-left
: 8px
;
}
.el
-upload
-list
--picture
-card
.el
-upload
-list__item
{
margin
-left
: 8px
!important
;
margin
-right
: 0px
;
}
.el
-upload
-list__item
{
.pic
-title
{
display
: inline
-block
;
width
: 100%;
height
: 30px
;
text
-align
: center
;
line
-height
: 30px
;
color
: #fff
;
font
-size
: 14px
;
background
: rgba(0, 0, 0, 0.6);
position
: absolute
;
top
: 0px
;
z
-index
: 10;
left
: 0;
}
}
.upload
-content
-box
{
height
: 100%;
display
: flex
;
align
-items
: center
;
justify
-content
: center
;
flex
-direction
: column
;
.el
-icon
-circle
-plus
-outline
{
font
-size
: 36px
;
}
.el
-upload__text
{
font
-size
: 14px
;
font
-weight
: 400;
color
: rgba(51, 51, 51, 1);
line
-height
: 21px
;
}
}
.el
-upload
-dragger
{
width
: 150px
!important
;
height
: 150px
!important
;
}
.el
-upload
{
width
: 150px
!important
;
height
: 150px
!important
;
}
.el
-upload
--picture
-card
{
border
: 0px
;
}
.el
-upload
-list__item
{
width
: 150px
;
height
: 150px
;
&:hover
{
.handle
-icon
{
display
: flex
;
}
}
}
.diy
-list__item
{
width
: 50px
!important
;
height
: 50px
!important
;
}
.handle
-icon
{
width
: 100%;
height
: 30px
;
display
: none
;
align
-items
: center
;
position
: absolute
;
bottom
: 0px
;
left
: 0px
;
background
: rgba(0, 0, 0, 0.6);
justify
-content
: center
;
}
