直接代码
1.安装:
npm i vuedraggable 或 yarn add vuedraggable
2.
引入:
import Draggable from 'vuedraggable'
注册
components: {
Draggable
}
需要自己写图片上传的图片列表,不能使用elment/iview图片上传自带的
3.
使用:
<!--@update 拖动有更新 comImageArr 图片列表-->
<Draggable v-model="comImageArr" @update="onMoveCallback">
<transition-group class="menuimgupload-list-box">
<div class="items-box" v-for="(items, index) in comImageArr" :key="index">
<img class="items-img" :src="items" />
<div class="mask">
<p class="mask-con">
<Icon
type="ios-eye-outline"
size="20"
color="#fff"
class="icon"
@click="handleView(index)" // 小眼睛 查看大图
></Icon>
<Icon
v-if="control"
type="ios-trash-outline"
size="20"
color="#fff"
class="icon"
@click="handleRemove(index)" // 删除图片
></Icon>
</p>
</div>
</div>
</transition-group>
</Draggable>
methods: {
onMoveCallback () {
// 我这里是一个图片上传的组件,虽然Draggable做了双向绑定,帮我更新了comImageArr 但是我要还告诉父组件更新 所以我需要这个事件
// handleRemove/handleView这个事件我就不放了
}
}
// 如果想快速看一下可以复制下面的代码
<template>
<Draggable v-model="comImageArr" @update="onMoveCallback">
<transition-group class="menuimgupload-list-box" :id="idNames">
<div class="items-box" v-for="(items, index) in comImageArr" :key="index">
<img class="items-img" :src="items" />
<div class="mask">
<p class="mask-con">
<Icon
type="ios-eye-outline"
size="20"
color="#fff"
class="icon"
@click="handleView(index)"
></Icon>
<Icon
type="ios-trash-outline"
size="20"
color="#fff"
class="icon"
@click="handleRemove(index)"
></Icon>
</p>
</div>
</div>
</transition-group>
</Draggable>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import Draggable from 'vuedraggable'
function RndNum(n){
var rnd=""
for (var i=0; i<n; i++) {
rnd += Math.floor(Math.random() * 10)
}
return rnd
}
export default {
components: {
Draggable
},
name: 'newImgUpload',
data () {
return {
idNames: 'box',
comImageArr: ['https://sdcms-1253457213.file.myqcloud.com/content/9ad289110e4eee4052a733b67ffd2a36','https://sdcms-1253457213.file.myqcloud.com/content/4a9060bf3b19a8bb61f458a7ce83467a']
}
},
created () {
this.idNames = this.idNames + RndNum(4)
},
methods: {
onMoveCallback () {
this.$emit(
'onUploadImage',
this.comImageArr
)
},
handleView (index) {
const viewer = new Viewer(document.getElementById(this.idNames), {
initialViewIndex: index,
title: false,
navbar: false,
hidden: function () {
viewer.destroy()
}
})
viewer.show()
}
}
}
</script>
<style lang="less" scoped>
.menuimgupload-list-box {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
.items-box {
width: 140px;
height: 80px;
position: relative;
margin-right: 6px;
margin-bottom: 6px;
border-radius: 4px;
overflow: hidden;
.mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
display: none;
.mask-con {
height: 20px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
.icon {
&:first-child {
margin-right: 15px;
// width: 32px;
// height: 32px;
}
}
}
}
.items-img {
width: 140px;
height: 80px;
border-radius: 4px;
}
}
.items-box:hover {
.mask {
display: block;
}
}
}
</style>
如果使用 import Viewer from 'viewerjs’他预览的,有一个值得注意的地方,当一个页面同时有几个预览的时候
new Viewer(document.getElementById(‘这个id不能写死’))
要么写个随机id,要么在viewer隐藏时触发的
hidden: function () {
移除上面创建的id
}