Vuejs Dropzone - Как включить значок «+», если в дропзоне уже есть несколько изображений - PullRequest
Новая
       19

Vuejs Dropzone - Как включить значок «+», если в дропзоне уже есть несколько изображений

0 голосов
/ 20 мая 2019

Я только что использовал Vue-dropzone для создания простого компонента загрузки файлов.Однако я хотел бы настроить его, добавив значок или кнопку «Добавить больше изображений», когда в рабочей зоне уже есть несколько изображений, чтобы пользователь мог понять, что он может загрузить несколько фотографий.Как мне этого добиться?Ниже приведены мой код и скриншот того, чего я хочу достичь

Обновление Я все еще пытаюсь реализовать эту функцию, любая помощь будет принята с благодарностью

Обновление 2 Я все еще застрял с этим, кто-нибудь достаточно хороший, чтобы помочь мне? 

   <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
  }
};

Чего я хотел бы достичь enter image description here

1 Ответ

1 голос
/ 20 мая 2019

Кажется, нет официального способа сделать это. Но из этого комментария я изменяю его код для использования с 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>
...