欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue实现多图添加显示和删除

程序员文章站 2022-03-10 17:17:26
本文实例为大家分享了vue实现多图添加显示和删除的具体代码,供大家参考,具体内容如下效果图:首先给一个input[type="file"],然后隐藏掉,当点击加号所在的区域时,触发文件选择的点击事件。...

本文实例为大家分享了vue实现多图添加显示和删除的具体代码,供大家参考,具体内容如下

效果图:

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" style="display: none;" @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 添加 删除