时间戳

首页 > 解决方案 > Vue 转换模式中的 Dropzone 不起作用

javascript - Vue 转换模式中的 Dropzone 不起作用

问题描述

我在挂载功能中有一个 dropzone 功能，当在视图中 dropzone 位于模态之外时它工作正常，但在转换模态中不起作用，对此有任何想法或解决方案吗？

这是.ftl

...
<transition name="modal" id="deletemo">
   <div v-if="uploadModal" >
       <div class="modal-mask">
           <div class="modal-wrapper">
               <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                         <div class="modal-header">
                              <h5 class="modal-title">upload file</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="uploadModal = false">
                                 <span aria-hidden="true">&times;</span>
                              </button>
                          </div>
                          <div class="modal-body">

                              <div class="form-group">
                                 <label>select file type</label>
                                 <multiselect placeholder="Seleccione tipo de fichero" v-model="fileTypeSelected"  :options="fileTypelist" > </multiselect>
                                                                      
                               </div>
                                                                    
                               <div class="form-group">
                                   <div class="animated fadeIn">
                                        <div class="card">                
                                           <div class="card-body">
                                               <div id="uploadFile" class="dropzone col" style="border-style: dashed;">
                                                       <div class="dz-message" data-dz-message>
                                                           <div>upload file here ...</div>
                                                       </div>
                                               </div>
                                            </div>
                                         </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="modal-footer">
                                   <button type="button" class="btn btn-secondary" @click="uploadModal = false">Close</button>
                              </div>
                         </div>
                     </div>
                   </div>
               </div>
          </div>
   </transition>

.js

 mounted:   function () {
                    var vue = this;
                    dropzone.autoDiscover = false;
                    $("div#uploadFile").dropzone({ 
                        
                        url: "/demo/uploadFile"
                       ,acceptedFiles: ".pdf"
                       ,clickable: false
                       ,maxFilesize: 100
                       ,addRemoveLinks: true
                       ,init: function() {
                           
                            this.on('success', function(file, json) {
                                  
                            });
                            this.on('addedfile', function(file) {
                            });
                            this.on("sending", function(file, xhr, formData) {
                                formData.append("nif", vue.filePerson);
                            });
                            this.on("complete", function(file) {
                                //this.removeFile(file);
                              });
                        }
        
                    });
                }

    });

我一直在寻找其他类似的帖子，但不是在寻找过渡，所以它对我不起作用。提前致谢。

标签： javascripthtmlvue.js

解决方案

在尝试了多种方法后，我在转换和内部函数初始化 dropzone 中使用属性“v-on:enter="enter" 找到了解决方案。

<transition name="modal" v-on:enter="enter" >
  ...... 
</transition>


enter: function () {
  
         $("div#uploadFile").dropzone({ 
                            
             url: "/demo/uploadFile"
             ......
         });
       },

推荐阅读