FilePond Vue的图像覆盖插件

问题描述 投票:0回答:1

我想要图像上的评论按钮,但找不到属性。

我设置了imagePreviewMarkupShow = true,但是没有用。

Package here

我的模板

    <template>
        <div id="app">
             <file-pond
            name="test"
            ref="pond"
            max-files="4"
            label-idle="Drop files here..."
            :allow-multiple="true"
            accepted-file-types="image/jpeg, image/png"
            :files="myFiles"
            v-on:init="handleFilePondInit"
            allowImagePreview ="false"
            />

        </div>
    </template>

我的脚本

    import  vueFilePond from 'vue-filepond';
    import 'filepond/dist/filepond.min.css';
    import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
    import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

    import FilePondPluginImageOverlay from 'filepond-plugin-image-overlay';
    // Create component
    const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview,FilePondPluginImageOverlay);

    export default {
         name: 'app',
        data: function() {
            return { myFiles: [] };
        },
        methods: {

            handleFilePondInit: function() {
                console.log('FilePond has initialized');
    // this.$refs.pond.getFiles();
                // FilePond instance methods are available on `this.$refs.pond`
            }
        },
        components: {
            FilePond
        }
    };

如何添加该按钮?

javascript vue.js filepond
1个回答
0
投票

我也在这个问题上苦苦挣扎。解决方案是导入CSS。

import 'filepond-plugin-image-overlay/dist/filepond-plugin-image-overlay.min.css'

Github中未提及。

© www.soinside.com 2019 - 2024. All rights reserved.