0

我已经有这个麻烦很长一段时间了。我无法针对vue2-dropzone的缩略图预览的 CSS 样式类（根据文档，vue2dropzone 似乎与 dropzone.js 共享许多类似的属性）。每当我上传图片时，这个 CSS 类都会出现在我的 dropzone HTML 标签中。

在此处输入图像描述

我看到我需要覆盖放置在 CSS 中的默认值，min-height: 100px否则我将得到如下所示的结果，该结果显示一个从图像突出的白框。

在此处输入图像描述

这是我的 vue 文件中的代码，因为它与它的idand相关ref：

    <vue2Dropzone 
    ref="vue2dropzone" 
    id="dropzone" 
    class="vue-dropzone"
    :options="dropzoneOptions"
    @vdropzone-s3-upload-error="s3UploadError"
    @vdropzone-s3-upload-success="s3UploadSuccess"
    ></vue2Dropzone>

我尝试了很多东西，但它似乎没有工作，即使是一些简单的东西，比如

.dropzone .dz-preview {
   min-height: 10px;
}

甚至添加一个，!important但它似乎没有奏效。

我已经尝试在特定于我的 CSS 的同时定位它：

#dropzone .dz-preview .dz-image-preview .dz-processing{
  min-height: 10px !important;
}

当我尝试这个时，似乎我所做的任何更改总是导致没有 CSS 样式被更改/影响。我什至只是尝试在图像上添加一些效果来更改 CSS，但仍然看不到任何效果发生。

#dropzone .dropzone .dz-preview .dz-image img{
  min-height: 10px;
  border: 20px solid red;
}

有谁知道我可以尝试更改缩略图预览大小的其他内容？我已经尝试在 dropzone 选项中更改thumbnailWidth和 thumbnailHeight`，但它不会摆脱实际图像下方的白色突出框。

4

1 回答 1

0

Vue2dropzone 不会应用任何自定义 CSS，除非 Dropzone 元素具有:include-styling="false"道具，就像@Zed Home 的评论所说的那样。如果你有这个道具，那么你所有的样式都会被应用。

唯一的问题是，您将丢失所有默认的 Dropzone 样式，这非常多，因此您必须编写额外的 CSS 来覆盖（现在缺少的）默认样式。我希望这是有道理的。尝试添加道具，看看会发生什么。

例子：

<vue2Dropzone 
    ref="vue2dropzone" id="dropzone" class="vue-dropzone"
    :options="dropzoneOptions"
    :include-styling="false"
    @vdropzone-s3-upload-error="s3UploadError"
    @vdropzone-s3-upload-success="s3UploadSuccess"
></vue2Dropzone>

在文档中阅读有关它的更多信息：https ://rowanwins.github.io/vue-dropzone/docs/dist/#/custom-preview

于 2021-04-24T12:15:16.117 回答