dropzone.js

Question

ile bir dize şablonu içinde vue.js sözdizimi nasıl kullanılır? Uygulamamda şu anda dropzone.jsDoc Ref uygulamayı deniyorum. Ancak, dropzone.js

'un temel işlevselliğini çalıştırmayı başardığımdan, farklı uygulama durumu sırasında yükleme ilerleme çubuğunu gizlemek ve göstermek için preview-template'u özelleştirmek istiyorum.

dropzone örneğinin başlatılması sırasında bir html dizesini options nesnesine geçirerek preview-template'u özelleştirebilirim. dropzone.js belgelerinde belirtildiği gibi Ama ben açıkça bu html dizesinin üzerine serpiştirmek eğer vue sözdizimi işlenecek değil. Bir şeyi uygulamak için bir şekilde işlenmeli.

Sorun:

Ne yapmak istediğim bu önizleme şablonu içinde vue.js sözdizimi kullanmaktır. Bu, bahsettiğim bileşen.

Kodu:

<dropzone id="myVueDropzone" :use-custom-dropzone-options=true 
      :dropzoneOptions="dzOptions" 
      :url="photosForm.uploadImageUrl" 
      v-on:vdropzone-removed-file="deleteImage" 
      :preview-template="templatePreview" 
      v-on:vdropzone-success="showSuccess"> 
</dropzone> 

Vue-Senaryo Kodu:

import Dropzone from 'vue2-dropzone'; 
export default { 

    methods: { 

     templatePreview(){ 
      return ` 
        <div class="dz-preview dz-file-preview"> 
         <div class="dz-image" style="width: 200px;height: 180px"> 
          <img data-dz-thumbnail /> 
         </div> 
         <div class="dz-details"> 
         <div class="dz-size"><span data-dz-size></span></div> 
         <div class="dz-filename"><span data-dz-name></span></div> 
         </div> 

         <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> 
         <div class="dz-error-message"><span data-dz-errormessage></span></div> 
         <div class="dz-success-mark"><i class="fa fa-check"></i></div> 
         <div class="dz-error-mark"><i class="fa fa-close"></i></div> 
        </div> 
        <div class=""> 
         <select class="form-control" title="" name="image_type"> 
          <options v-for="type in image_type" value="type.value">{{ type.title }}</options> 
         </select> 
        </div> 
       `; 
     } 
    }, 
} 

Github Resource, Github Issue

github Bileşen sahibi diyor ,

Maalesef, ne yapmak istemeniz kolay olmasa da, şu anda kolayca ulaşılamıyor. Şu anda bu in pişirmeyi halledemiyorsanız yüzden biz göreceğiz bu modülün bir yeniden yazma biraz planlıyoruz. Here

Answer 1

Önizleme şablonunda yapı içinde Vue uygulayamaz, dropzone beri içten DOM'yi yönlendirir. Ama may ... senin mounted Kanca:

new Vue({ 

    data() { 
     return { 
      files: [] 
     } 
    }, 

    mounted(){ 
     var vm = this; 

     // create your dropzone instance using reference to the target div 
     var dz = new Dropzone(vm.$refs.dropzone /*, { opts }*/); 

     // update data.files whenever new files are added 
     dz.on('addedfiles', function(files){ 

      // convert files (an array like object) to real array 
      files = Array.from(files); 

      // add some additional properties (link, accepted...) 
      // before files are registered to the `vm` instance 
      // so that Vue may convert them into reactive 
      files.forEach(file => file.link = file.accepted = undefined); 

      // files now may be added to `vm`; 
      vm.files = files; 
     }); 
    } 
}) 

Şimdi dosyalar reaktiftir ve şablonunuzda v-for bunları kullanabilir:

<template> 
    <div> 
     // this is the dropzone area 
     <div ref="dropzone"></div> 

     // list the files 
     <p v-for="file in files"> {{file.name}} </p> 
    </div> 
</template> 

Ek bilgi bağlamak için diğer dropzone olayları kullanabilir Şablonda kullanabileceğiniz reaktif verilerinize.