如何附加onClick事件以在vue-dropzone-component中预览图像

时间:2017-11-15 11:31:43

标签: laravel vue.js dropzone

我在vue上有组件dropzone。我在设置中安装我的模板。 然后我想设置v-on:点击(方法)在dropzone中预览图像,但事件不起作用。如何正确设置单击元素?

<template>
     <vue-dropzone :options="dropzoneOptions" ref="myVueDropzone" id="customdropzone"
                   :preview-template="template">
     </vue-dropzone>
</template>

methods: {
     template () {
        return `<div class="dz-preview dz-file-preview" v-on:click.native="alert(1)">
                    <div class="dz-image" v-on:click="alert(1)">
                        <img data-dz-thumbnail>
                    </div>
                    <div class="dz-details" v-on:click="alert(1)">
                        <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>`
            ;
        },
 }


data: function () {
    return {
        dropzoneOptions: {
            url: 'https://httpbin.org/post',
            thumbnailWidth: 200,
            maxFilesize: 0.5,
            addRemoveLinks: true,
            previewTemplate: this.template(),
            headers: {"My-Awesome-Header": "header value"},
        },
        salonID: 0,
        photos: [],
      }
    },

0 个答案:

没有答案