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

Question

我目前正在尝试将 dropzone.js Doc 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

库的作者说，

Unfortunately what your wanting to do isn't easily achievable at the moment, although it would be nice. We're currently planning a bit of a rewrite of this module so we'll see if we can work out how to bake this in. Here

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 事件将附加信息绑定到您可以在模板中使用的反应数据。

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

How to use vue.js syntax inside a string template with dropzone.js

dropzone.js

vue.js

vue-component

vuejs2

问题：

代码：

Vue 脚本代码：