用vant uploader怎么实现上传图片并可拖曳图片设封�
Admin 2022-06-28 群英技术资�
效果图如下所示:
<!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, //当前页面注册拖拽组件 }, 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) { // 上传图片到图片服务器 this.fileList.push(file) console.log(file) }, // 点击预览 previewImg(images, index) { let listSrc = []; this.fileList.forEach(function(v,i){ listSrc.push(v.content) }) vant.ImagePreview({ images:listSrc, startPosition: index, closeable:true }); }, // 拖拽结束� 获取刚刚拖动的数� end(e) { var _oldIndex = e.oldIndex var _oldItem = this.fileList[_oldIndex] console.log(_oldItem); }, } }) </script> </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
ES6增加了for..of循环,用于迭代对象,要求对象必须是可迭代的。可用范围包括数组、Set和Map结构、数组的对象、Generator对象和字符串�
这篇文章主要给大家介绍了关于如何利用vue3开发一个打砖块小游戏的相关资料,通过一个小游戏实例可以快速了解vue3开发小游戏的流�,需要的朋友可以参考下
这篇文章主要为大家详细介绍了jquery+springboot文件上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
这篇文章主要给大家分享JS中的Map与WeakMap类型的用法,文中示例代码介绍的非常详细,对大家学习Map与WeakMap类型的使用和创建等操作有一定的帮助,感兴趣的朋友可以参考,希望大家阅读完这篇文章能有所收获,下面我们一起来学习一下吧�
怎样用JS实现复选框的全选功能?复选框的全选功能便于多选操作,也是比较实用的一个功能,对此这篇文章就给大家分享JS实现复选框的全选的代码,感兴趣的朋友就接着往下看吧�
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078