Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Requirements:

Background management to achieve a list of pictures, pictures can be dragged to achieve position change

Ideas:

Picture list render and upload components, drag components combination

Code:

<template> <div class="more-img-uploade"> <draggable :list="imgList" tag="ul" class="img-list" v-bind="dragOptions" draggable=".item" > <li v-for="(item, index) in imgList" :key="index" class="item"> <img :src="item.url" alt=""> <i v-if="! CanEdit "class=" el-icon-circy-close" @click="deletImgList(index)" /> </li v-show="imgList.length < imgLimit" class="img-li"> <el-upload :action="actionUrl" :headers="headers" :on-success="uploadSuccess" :before-upload="uploadBefore" class="upload-class" :show-file-list="false" :disabled="canEdit" > <i class="el-icon-plus" /> </el-upload> </li> </draggable> </div> </template> import draggable From 'vuedraggable' export default {components: {draggable}, props: {// Upload API actionUrl: {type: String, default: ImgList: {type: Array, default() {return []}}, // canEdit: {type: Boolean, default: ImgLimit: {type: Number, default: 0}}, data() {return {headers: {'api-ver': '1.0.0', token: Token, charset: 'UTF-8'}}}, computed: {// Drag properties dragOptions() {return {animation: CanEdit group: 'description', ghostClass: 'ghost'}}}, methods: Const dotIndex = file.name.lastIndexof ('.') {uploadBefore(file) {let bool = null const dotIndex = file.name.lastindexof ('.') const suffixOfImage = file.name.slice(dotIndex + 1).toLowerCase() switch (suffixOfImage) { case 'gif': case 'jpeg': case 'png': case 'jpg': case 'bmp': case 'tiff': case 'webp': bool = true break default: bool = false } if (bool) { const isLt5Mb = file.size / 1024 < 500 if (isLt5Mb) return true else { This.$message.warning(' Upload image size cannot exceed 500KB! ') return false}} else {this.$message.warning(' Your image format is not correct! ') return false}}, // uploadSuccess(res, file, fileList) { this.hide = true if (res.code === 200) { if (res.data) this.imgList.push({ url: res.data[0] }) if (res.response) this.imgList.push({ url: res.response[0] }) } else { this.$message.warning(res.message) } }, DeletImgList (index) {this.imglist.splice (index, 1) } } } </script> <style lang="scss"> .more-img-uploade .el-icon-circle-close { color: red; position: absolute; font-size: 15px; z-index: 999; right: 5px; top: 5px; } </style> <style scoped> .img-list { display: flex; flex-wrap: wrap; max-height: 350px; overflow-y: scroll; }.img-list. item:nth-child(1)::after {content: ""; position: absolute; width: 40px; height: 20px; text-align: center; line-height: 20px; top: 0; left: 0; color: #ffffff; font-size: 14px; background: coral; } .img-list li, .img-li { width: 180px; height: 120px; margin: 15px 10px; border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .img-li { float: left; } .img-list li img { width: 100%; height: 100%; object-fit: contain; background: #000; } .upload-class { font-size: 28px; color: #8c939d; text-align: center; height: 120px; width: 180px; line-height: 120px; box-sizing: border-box; } </style>Copy the code

Vuedraggable props:

value

Type: array, required: no, Default: NULL Is usually the same as the array referenced by the internal element V-for instruction. The first use of this component is vuex compatible, and v-Model can also be usedCopy the code

list

Type: array, required: No, Default: NULL In addition to the value prop above, list is an array to be synchronized with drag and drop. The main difference is that list Prop is updated by the Draggable component using the splice method, while value is immutable and the two cannot be used togetherCopy the code
tag
Type: string Default: div The HTML node type of the element created by the draggable component, which can also be passed as an element containing the name of the VUE component. In this case, the Draggable property is passed to the created componentCopy the code
clone
Default value: (original) => {return original; } When the clone option is true, the function on the source component is called to clone the element. The only argument is the viewModel element to clone, and the value returned is its clone version. Vue. draggable reuses viewModel elements by default, so you must use this hook if you want to clone or deeply clone it.Copy the code

References:

<GlobalUploadMoreImg
:can-edit="canEdit"
:action-url="actionUrl"
:img-list.sync="imgList"
:img-limit="9"
/>
Copy the code