如何在帶有dropzone.js的字符串模板中使用vue.js語法

Question

我目前正在嘗試執行dropzone.jsDoc Ref - 進入我的應用程序。但是因爲我設法運行dropzone.js的基本功能性

我想定製preview-template以隱藏和顯示不同應用程序狀態期間的上傳進度條。

我可以通過在dropzone實例的初始化過程中將html字符串傳遞給選項對象來自定義preview-template。如dropzone.js文檔中所述但顯然，vue語法不會被處理，如果我只是把它灑在這個html字符串上。它以某種方式必須被處理以實現該事情。

問題：

我想做的事就是用這個預覽模板內vue.js語法。 這是我正在談論的組件。

代碼：

<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的腳本代碼：

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上的組件老闆說，

不幸的是，你想做的事情目前不容易實現，儘管它會很好。目前，我們正在規劃一個有點這個模塊的重寫，所以我們會看到，如果我們能制定出如何烘烤這個英寸Here

Answer 1

你不能在構建預覽模板應用Vue公司，由於內部懸浮窗操縱DOM。但你可能......在你mounted鉤：

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

現在文件是反應性的，您可以在您的模板與v-for使用它們：

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

您可以使用其他懸浮窗事件綁定其他信息添加到您可能在模板中使用的反應性數據。