vant uploader實現(xiàn)上傳圖片拖拽功能(設(shè)為封面)
更新時間:2021年10月20日 11:13:38 作者:JaneSwettie
這篇文章主要介紹了vant uploader實現(xiàn)上傳圖片拖拽功能(設(shè)為封面),這個功能在日常生活中經(jīng)常會用到,操作非常方便,今天通過實例代碼介紹實現(xiàn)過程,需要的朋友可以參考下
效果圖如下所示:
<!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="圖片" class="van-image__img"> <div class="van-uploader__preview-cover"> <div class="preview-cover van-ellipsis" v-if="index == 0">封面圖</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, //當(dāng)前頁面注冊拖拽組件 }, 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: { // 刪除圖片 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) { // 上傳圖片到圖片服務(wù)器 this.fileList.push(file) console.log(file) }, // 點擊預(yù)覽 previewImg(images, index) { let listSrc = []; this.fileList.forEach(function(v,i){ listSrc.push(v.content) }) vant.ImagePreview({ images:listSrc, startPosition: index, closeable:true }); }, // 拖拽結(jié)束后 獲取剛剛拖動的數(shù)據(jù) end(e) { var _oldIndex = e.oldIndex var _oldItem = this.fileList[_oldIndex] console.log(_oldItem); }, } }) </script> </html>
到此這篇關(guān)于vant uploader實現(xiàn)上傳圖片拖拽功能(設(shè)為封面)的文章就介紹到這了,更多相關(guān)vant uploader上傳圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js實現(xiàn)C#的StringBuilder效果完整實例
這篇文章主要介紹了js實現(xiàn)C#的StringBuilder效果,以完整實例形式分析總結(jié)了js實現(xiàn)C#的StringBuilder效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12JS實現(xiàn)數(shù)組簡單去重及數(shù)組根據(jù)對象中的元素去重操作示例
這篇文章主要介紹了JS實現(xiàn)數(shù)組簡單去重及數(shù)組根據(jù)對象中的元素去重操作,涉及javascript數(shù)組元素的遍歷、判斷、追加等操作實現(xiàn)去重功能的相關(guān)技巧,需要的朋友可以參考下2018-01-01uniapp中使用render.js進行openlayers、arcgis等地圖操作實戰(zhàn)指南
renderjs是一個運行在視圖層的js,它比WXS更加強大,它只支持app-vue和h5,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用render.js進行openlayers、arcgis等地圖操作的相關(guān)資料,需要的朋友可以參考下2024-01-01輕松實現(xiàn)HTML和JS之間的轉(zhuǎn)化的代碼
輕松實現(xiàn)HTML和JS之間的轉(zhuǎn)化的代碼...2007-09-09