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

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

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

  1. **我的模板**

My Script

  1. **我的脚本**

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

  1. <template>
  2. <div id="app">
  3. <file-pond
  4. name="test"
  5. ref="pond"
  6. max-files="4"
  7. label-idle="Drop files here..."
  8. :allow-multiple="true"
  9. accepted-file-types="image/jpeg, image/png"
  10. :files="myFiles"
  11. v-on:init="handleFilePondInit"
  12. allowImagePreview ="false"
  13. />
  14. </div>
  15. </template>

My Script

  1. import vueFilePond from 'vue-filepond';
  2. import 'filepond/dist/filepond.min.css';
  3. import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
  4. import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
  5. import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
  6. import FilePondPluginImageOverlay from 'filepond-plugin-image-overlay';
  7. // Create component
  8. const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview,FilePondPluginImageOverlay);
  9. export default {
  10. name: 'app',
  11. data: function() {
  12. return { myFiles: [] };
  13. },
  14. methods: {
  15. handleFilePondInit: function() {
  16. console.log('FilePond has initialized');
  17. // this.$refs.pond.getFiles();
  18. // FilePond instance methods are available on `this.$refs.pond`
  19. }
  20. },
  21. components: {
  22. FilePond
  23. }
  24. };

How do I add that button?

答案1

得分: 2

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

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

  1. 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:

确定