Vuejs Dropzone - 当dropzone中已经有一些图像时如何包含“+”图标

Question

我刚刚使用 Vue-dropzone 创建了一个简单的文件上传器组件。但是，当放置区域中已经有一些图像时，我想通过包含一个图标或一个名为“添加更多图像”的按钮来自定义它，以便用户可以理解他们可以上传多张照片。我怎样才能做到这一点？下面是我的代码和我想要实现的截图

更新我仍在尝试实现此功能，任何帮助将不胜感激

Update2我仍然坚持这个，有没有人能很好地指导我完成？

   <template>
  <vue-dropzone
    id="drop1"
    :options="dropOptions"
    :useCustomSlot="true"
    @vdropzone-complete="afterComplete"
  >
    <div class="dropzone-custom-content">
      <i class="fas fa-cloud-upload-alt fa-3x"></i>
      <h4 class="dropzone-custom-title mb-0 mt-3">Drag & Drop</h4>
      <div class="subtitle">or click to add your image</div>
    </div>
  </vue-dropzone>
</template>


import vueDropzone from "vue2-dropzone";

export default {
  data() {
    return {     
      dropOptions: {   
        url: "https://httpbin.org/post",
        acceptedFiles: "image/*",
        addRemoveLinks: true,
        thumbnailWidth: 160, // px
        thumbnailHeight: 160
      }       
    };
  },
  components: {
    vueDropzone
  }
};

我想要达到的目标

Answer 1

似乎没有官方的方法可以做到这一点。但是从这个comment 我修改了他的代码以与vue2-dropzone 一起使用，如下所示：

<template>
  <div>
    <vue-dropzone id='dropzone'
      ref='myVueDropzone'
      :options='dropzoneOptions'
      @vdropzone-file-added='handleMoreThumbnail'
      @vdropzone-removed-file='handleMoreThumbnail'>
    </vue-dropzone>
    <div class='more' ref='more'>+</div>
  </div>
</template>

<script>
  import vueDropzone from 'vue2-dropzone'
  import 'vue2-dropzone/dist/vue2Dropzone.min.css'

  export default {
    components: {
      vueDropzone
    },

    data () {
      return {
        dropzoneOptions: {
          url: 'https://httpbin.org/post',
          addRemoveLinks: true
        }
      }
    },

    mounted () {
      this.$el.removeChild(this.$refs.more)
    },

    methods: {
      handleMoreThumbnail () {
        let dropzone = this.$refs.myVueDropzone.dropzone
        dropzone.files.length > 0
          ? dropzone.element.appendChild(this.$refs.more)
          : dropzone.element.removeChild(this.$refs.more)
      }
    }
  }
</script>

<style>
  .more {
    display: inline-block;
    margin: 16px;
    border: 3px dashed lightgray;
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    color: lightgray;
    border-radius: 8px;
    font-size: 60px;
    text-align: center;
    line-height: 200px;
    pointer-events: none;
  }
</style>