“Image Overlay plugin for FilePond Vue” 可以翻译为 “FilePond Vue 的图像叠加插件”。

huangapple go评论75阅读模式
英文:

Image Overlay plugin for FilePond Vue

问题

I want a review button on image, but I don't find attribute.

我想在图像上添加一个查看按钮,但我找不到属性。

I set the imagePreviewMarkupShow = true but it didn't work.

我设置了 imagePreviewMarkupShow = true 但没有生效。

Package here

包在这里

My Template

**我的模板**

My Script

**我的脚本**

How do I add that button?
如何添加该按钮?

英文:

I want a review button on image, but I don't find attribute.

I set the imagePreviewMarkupShow = true but it didn't work.

Package here

My Template

    <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>

My Script

    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
        }
    };

How do I add that button?

答案1

得分: 2

我也在面对这个问题时遇到了困难。
解决方法是导入CSS。

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

在Github中没有提到这一点。

英文:

I was also struggling with this problem.
The solution is to import CSS.

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

This is not mentioned in Github.

huangapple
  • 本文由 发表于 2020年1月6日 22:13:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/59613612.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定