您的位置:首页 > 编程学习 > > 正文

vue怎么在中间加图片(Vue实现多图添加显示和删除)

更多 时间:2022-01-23 02:09:10 类别:编程学习 浏览量:2379

vue怎么在中间加图片

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

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

效果图:

vue怎么在中间加图片(Vue实现多图添加显示和删除)

首先给一个input[type="file"],然后隐藏掉,当点击加号所在的区域时,触发文件选择的点击事件。

注意:取src的值时用v-bind:src="imgsrc";用src="imgsrc"或者src="{{imgsrc}}"会报错。

代码:(有些样式省略,主要是添加和删除方法)

  • <template>
     <li id="originality">
        <li class="ipt">主图:</li>
        <li class="picture">
         <li class="Mainpicture">
          <li class="iconfont icon-jia" @click="uploadPic('filed')"></li>
         </li>
         <!--主图可以添加多个图片-->
         <li id="img" v-for="(imgsrc,index) in imgsrcs">
          <img id="imgshow" :src="imgsrc">
          <li class="iconfont icon-cha" @click="deleteMulPic(index)"</li>
         </li>
        </li>
        <input id="filed" type="file" multiple="multiple" accept="image/*,application/pdf" style="display: none;" @change="changeMulPic()">
     
        
     </li>
    </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 添加 删除