Vant uploader implements the drag-and-drop function for uploading pictures (set as cover)
|
The effect diagram is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="public/vant/index.css" rel="external nofollow" >
<script src="public/vue.min.js"></script>
<script src="public/vant/vant.min.js"></script>
<script src="public/sortable/Sortable.min.js"></script>
<script src="public/draggle/vuedraggable.umd.js"></script>
</head>
<style>
.img_uploader{display: flex;}
.img_upload span {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.img_upload_item {position: relative;margin: 0 8px 8px 0;cursor: pointer;}
.preview-cover {position: absolute;bottom: 0;box-sizing: border-box;width: 100%;padding: 4px;color: #fff;font-size: 12px;text-align: center;background: rgba(0, 0, 0, 0.3);}
.van-image__error,.van-image__img,.van-image__loading {object-fit: cover;}
</style>
<body>
<div id="app">
<div class="img_uploader">
<van-uploader :after-read="onRead"> </van-uploader>
<draggable class="img_upload" v-model="fileList" :group="{name:'imgs'}" @end="end" animation="200">
<transition-group>
<div class="img_upload_item" v-for="(item,index) in fileList" :key="index" @click="previewImg(fileList,index)">
<div class="van-image van-uploader__preview-image">
<img :src="item.content" alt="Picture" class="van-image__img">
<div class="van-uploader__preview-cover">
<div class="preview-cover van-ellipsis" v-if="index == 0">Cover image</div>
</div>
</div>
<div class="van-uploader__preview-delete" @click="delImg(index)">
<i class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i>
</div>
</div>
</transition-group>
</draggable>
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
components:
vuedraggable: window.vuedraggable, //Register drag component on current page},
data() {
return {
fileList: [
{content: 'https://img01.yzcdn.cn/vant/leaf.jpg',name: '12'},
{content: 'images/banner1.png',name: '12'},
{content: 'images/banner2.png',name: '12'},
{content: 'images/banner3.png',name: '12'},
{content: 'images/banner4.png',name: '12'},
],
}
},
methods: {
// Delete the image delImg(index) {
if (isNaN(index) || index >= this.fileList.length) {
return false
}
let tmp = []
for (let i = 0, len = this.fileList.length; i < len; i++) {
if (this.fileList[i] !== this.fileList[index]) {
tmp.push(this.fileList[i])
}
}
this.fileList = tmp
},
onRead(file) { // Upload the image to the image server this.fileList.push(file)
console.log(file)
},
// Click to preview previewImg(images, index) {
let listSrc = [];
this.fileList.forEach(function(v,i){
listSrc.push(v.content)
})
vant.ImagePreview({
images:listSrc,
startPosition: index,
closeable:true
});
},
// Get the data just dragged after the drag ends end(e) {
var _oldIndex = e.oldIndex
var _oldItem = this.fileList[_oldIndex]
console.log(_oldItem);
},
}
})
</script>
</html>This is the end of this article about how to use vant uploader to upload pictures by dragging and dropping (set as cover). For more information about vant uploader to upload pictures, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: HTML table markup tutorial (38): Border color attribute of the header BORDERCOLOR
>>: Description of the default transaction isolation level of mysql and oracle
Recommend
A new CSS image replacement technique (background display and text moving off screen) to say goodbye to 9999px
-9999 px image replacement technology has been pop...
WeChat applet custom tabBar step record
Table of contents 1. Introduction 2. Customize ta...
mysql 8.0.19 winx64.zip installation tutorial
This article records the installation tutorial of...
HTML Code Writing Guide
Common Convention Tags Self-closing tags, no need...
Detailed analysis of the blocking problem of js and css
Table of contents DOMContentLoaded and load What ...
Mobile development tutorial: Summary of pixel display issues
Preface I believe that in the process of mobile t...
CSS3 analysis of the steps for making Douyin LOGO
"Tik Tok" is also very popular and is s...
A detailed analysis of the murder caused by a misplaced double quote in MySQL
1. Introduction Recently, I often encounter devel...
A brief discussion on the issue of dates containing zero values in MySQL database
By default, MySQL can accept the insertion of 0 v...
Encapsulation method of Vue breadcrumbs component
Vue encapsulates the breadcrumb component for you...
Solution to the docker command exception "permission denied"
In Linux system, newly install docker and enter t...
What you need to know about filters in Vue
Table of contents Preface What is a filter How to...
Mysql multiplication and division precision inconsistency problem (four decimal places after division)
question When I was writing a project function to...
Detailed explanation of using echarts map in angular
Table of contents Initialization of echart app-ba...
Problems with configuring https server and reverse proxy with Nginx under Windows
Request logic Front-end --> Request nginx via ...