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

Question

我目前正在尝试将dropzone.js Doc Ref实施到我的应用程序中.但是因为我已经设法运行了dropzone.js的基本功能

我想自定义preview-template隐藏并在不同的应用程序状态下显示上传进度条.

我可以preview-template通过在初始化dropzone实例期间将html字符串传递给options对象来自定义.正如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-Script代码:

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资源,Github问题

github的组件所有者说,

不幸的是,你想要做的事情目前还不容易实现,尽管它会很好.目前,我们正在规划一个有点这个模块的重写,所以我们会看到,如果我们能制定出如何在烤这一点.在这里

Answer 1

您无法在预览模板中的构建中应用 Vue，因为 dropzone 在内部操作 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>

您可以使用其他 Dropzone 事件将附加信息绑定到您可以在模板中使用的反应数据。