使用element+vuedraggable实现图片上传拖拽排序_上网技巧

<code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;">// 上传组件

<draggable

v-model="value"

forceFallback="true"

animation="400"

class="clearfix"

>

<transition-group>

</div>

</transition-group>

<el-upload

class="wrap"

list-type="picture-card"

:action="imgUploadUrl"

:show-file-list="false"

:limit="max"

:on-progress="handlePictureCardPreview"

:on-exceed="onExceed"

:disabled="disabled"

:on-change="onChange"

:file-list="fileList"

:multiple="true"

:on-success="handleSuccess"

v-if="isUploadBtn"

>

</el-upload>

</div>

</draggable>

</div>

<el-dialog title="查看图片" :visible.sync="dialogVisible">

</el-dialog>

</div>

</template>

import draggable from 'vuedraggable'

import {imgUpload} from '@/api/upload'

import {MathRandom} from '@/utils/auth'

export default {

name:'Upload',

data () {

return {

dialogImageUrl: '',

uploadLoading:false,

dialogVisible: false,

disabled: false,

fileList:[],

imgUploadUrl:imgUpload(),

}

},

props: {

value: {

type: () => [],

default () {

return []

}

},

max:{

type:[Number,String],

default:9

},

disabled:{

type:Boolean,

default:false

}

},

model:{

event: 'giveActive'

},

computed:{

isUploadBtn(){

return this.value.length<this.max

}

},

mounted(){

// 监听一次value,只执行一次,用于回显图片,

const unwatch = this.$watch('value', function(newValue, oldValue){

this.fileList = newValue

unwatch()

});

},

methods: {

go () {

this.$emit('giveActive', this.value);

},

showImg(url){

this.dialogImageUrl = url

this.dialogVisible = true

},

delImg(item,index){

this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning'

}).then(() => {

this.value.splice(index,1)

this.fileList.splice(index,1)

this.go()

}).catch(() => {

});

},

onChange(file,fileList){

this.fileList = fileList

},

handlePictureCardPreview(file) {

this.uploadLoading = true

},

onExceed(files, fileList,props){

this.$message({

message:`超出最大上传数量,最多可上传${this.max}张图片`,

type:'error'

})

},

handleSuccess(response, file,fileList) {

console.log(response,'结果')

this.uploadLoading =false

this.urlList(response)

},

urlList(res){

const obj={

id:MathRandom(),

url:res.data.data,

status:'success',

uid:MathRandom()

}

console.log(obj)

this.value.push(obj)

this.go()

}

</script>

.allUpload{

.left{

float: left;

width: 148px;

height: 148px;

border-radius: 6px;

border: 1px solid #c0ccda;

margin:0 20px 20px 0;

overflow: hidden;

position: relative;

cursor: pointer;

&:hover{

.content-wrap{

display: block;

}

img{

max-width: 100%;

max-height: 100%;

object-fit: cover;

}

.content-wrap{

display: none;

position: absolute;

width: 100%;

height: 100%;

background:rgba($color: #000000, $alpha: 0.4);

.content{

width: 100%;

height: 100%;

i{

color: #fff;

font-size: 18px;

&:nth-of-type(1){

margin-right: 10px;

}

&:nth-of-type(2){

margin-left: 10px;

}

.wrap{

float: left;

}

</style>

使用组件：

<div>

<Upload

:max="4"

v-model="active"

>

</Upload>

</div>

</template>

//

import draggable from 'vuedraggable'

import Upload from '@/components/Upload'

export default {

name: 'treeDrag',

components: { draggable },

data () {

return {

active:[]

}

},

components:{

Upload

},

mounted(){

setTimeout(()=>{

const obj ={

url:'https://tcity-mall.oss-cn-shenzhen.aliyuncs.com/2020/09/29/b46661a32d914158a4ae68a026cb6e83.jpg',

status:'success',

uid:MathRandom()

}

this.active.push(obj)

},2000)

}

</script>

标签： element

顶一下

(0)

踩一下

(0)

QQ地带

使用element+vuedraggable实现图片上传拖拽排序

Google提供的广告

推荐图文

相关文章

今日推荐

热门文章

网友推荐