您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章给大家分享的是有关Vue如何实现多图添加显示和删除的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
效果图:
首先给一个input[type="file"],然后隐藏掉,当点击加号所在的区域时,触发文件选择的点击事件。
注意:取src的值时用v-bind:src="imgsrc";用src="imgsrc"或者src="{{imgsrc}}"会报错。
代码:(有些样式省略,主要是添加和删除方法)
<template> <div id="originality"> <div class="ipt">主图:</div> <div class="picture"> <div class="Mainpicture"> <div class="iconfont icon-jia" @click="uploadPic('filed')"></div> </div> <!--主图可以添加多个图片--> <div id="img" v-for="(imgsrc,index) in imgsrcs"> <img id="imgshow" :src="imgsrc"> <div class="iconfont icon-cha" @click="deleteMulPic(index)"</div> </div> </div> <input id="filed" type="file" multiple="multiple" accept="image/*,application/pdf" @change="changeMulPic()"> </div> </template> <script> export default { name: "originality", components: { }, data() { return { imgsrcs: [] } }, methods: { uploadPic: function(val) { document.getElementById(val).click(); }, changeMulPic: function() { var file = $("#filed").get(0).files[0]; $("#img").show(); this.imgsrcs.push(window.URL.createObjectURL(file)) }, deleteMulPic: function(index) { this.imgsrcs.splice(index, 1); } } } </script> <style scoped> .Mainpicture { float: left; width: 100px; height: 100px; background: rgba(255, 255, 255, 1); border-radius: 2px; border: 1px solid #E5E9F2; } .picture { min-height: 100px; } .files { display: none; float: left; } #img { margin-left: 20px; float: left; width: 100px; height: 100px; border-radius: 2px; border: 1px solid #E5E9F2; } .icon-cha { cursor: pointer; position: absolute; width: 10px; height: 10px; margin-left: 85px; margin-top: -100px; color: #BFC5D1; } #imgshow { width: 100px; height: 100px; } .icon-jia { text-align: center; width: 20px; height: 20px; line-height: 20px; color: #BFC5D1; padding: 40px; cursor: pointer; } </style>
感谢各位的阅读!关于“Vue如何实现多图添加显示和删除”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。