0

我正在为 Blazor WebAssembly 使用一个名为 Mudblazor 的 CSS 框架。

我在拖放区域内添加了一个按钮，该按钮将删除已上传的每个图像。但是当我点击删除按钮时，我只会启动文件管理器。

问题是实际的拖放区域设置为位置：绝对无。

有没有办法解决这个问题？

这看起来像什么的例子。无法单击删除按钮。当我尝试单击删除按钮时会出现文件管理器。

在此处输入图像描述

CSS：

 .drag-drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    /*        min-height: 400px;
*/ border: 3px dotted;
    min-height: 100px;
    border: 2px dashed rgb(0, 135, 247);
}

.drag-drop-input {
    position: absolute;
    width: 100%;
    height: 90%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.drag-enter {
    box-shadow: var(--mud-elevation-10);
}

.list {
    padding: 2em;
    min-width: 100%;
}

剃刀

<MudList Style="padding:2em;width:100%;" Dense="true">
@foreach (var file in fileNames)
{
    <MudListItem @key="@file">
        <MudChip Color="Color.Dark"
                 Style="width:60px; overflow:hidden;"
                 Text="@(file.Split(".").Last())" />
        @file <MudButton Color="Color.Error" OnClick="() => Remove(file)" Style="position:unset;">Remove</MudButton>
    </MudListItem>}

删除方法：

    void Remove(string file)
{
    var ret = fileNames.FirstOrDefault(x => x.Contains(file));
    if (ret != null)
    {
        fileNames.Remove(ret);
    }
}
4

2 回答 2

0

使用 MudBlazor 主页 https://mudblazor.com/components/fileupload#drag-and-drop-example中的示例代码时，我遇到了同样的问题

正如 Memetican 所说，它似乎.drag-drop-input覆盖了其他内容。我不知道我在做什么，所以我不会给出解释，但是这position: absolute;部分引起了我的兴趣。在这里阅读它 使我将其从 更改absolute为static. 连同示例代码中的一些其他细微更改，我有以下似乎正在工作

@page "/tools/csvimport"
@inject ISnackbar Snackbar
<style>
    .drag-drop-zone {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .4s;
        height: 100%;
    }

    .drag-drop-input {
        position: static;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    .drag-enter {
        box-shadow: var(--mud-elevation-10);
    }

    .list {
        padding: 2em;
        min-width: 100%;
    }
</style>

<MudGrid Justify="Justify.Center" Spacing="4">

    <MudItem xs="12" sm="12" md="6">
        <MudPaper @ondragenter="@(()=>_dragEnterStyle="drag-enter")"
                  @ondragleave="@(()=>_dragEnterStyle=null)"
                  @ondragend="@(()=>_dragEnterStyle=null)"
                  Class=@("drag-drop-zone "+ _dragEnterStyle)
                  MinHeight="200px">

            <InputFile OnChange="OnInputFileChanged" class="drag-drop-input" />

            @if (file is null)
            {
                <MudText Typo="Typo.h6">Drag file here, or click to browse your files</MudText>
            }
            else
            {
                <MudChip Color="Color.Info">@file.Name</MudChip>
            }


        </MudPaper>
        <MudGrid Justify="Justify.Center" Spacing="4" Class="mt-4">
            <MudItem>
                <MudButton OnClick="Upload" Disabled="@(file is null)" Color="Color.Primary" Variant="Variant.Filled">Upload</MudButton>
            </MudItem>
            <MudItem>
                <MudButton OnClick="@(() => file = null)" Disabled="@(file is null)" Color="Color.Error" Variant="Variant.Filled">Clear</MudButton>
            </MudItem>
        </MudGrid>
    </MudItem>

</MudGrid>
@code {
    string _dragEnterStyle;
    IBrowserFile file;

    void OnInputFileChanged(InputFileChangeEventArgs e)
    {
        file = e.File;
    }
    void Upload()
    {
        //Upload the files here
        Snackbar.Configuration.PositionClass = Defaults.Classes.Position.TopCenter;
        Snackbar.Add("TODO: Upload " + file.Name, Severity.Normal);
    }
}
于 2021-11-26T10:07:08.417 回答
0

我认为您已经遗漏了放置目标的代码，因为您的大多数 CSS 样式都没有被引用。

但是，您的放置目标似乎位于文件列表的顶部。请注意z-index您的 CSS 中的...

.drag-drop-input {
    position: absolute;
    width: 100%;
    height: 90%;
    opacity: 0;
    cursor: pointer;
    z-index: 2; /* <== here */
}

这将创建一个玻璃板类型的效果。您可以看到您的文件列表和删除按钮，因为您有opacity: 0;- 但是您无法与它们交互，因为您的放置目标在 z 顺序中位于它们上方。

将 HTML 页面想象成一堆重叠的矩形。鼠标交互仅触及最顶层。

解决方案1：（可行）删除该z-index，或将文件列表和按钮的z-index设置为高于放置目标。这应该可以工作，但是如果用户尝试将文件直接放在您的文件列表或您的删除按钮上，它可能会在某些浏览器上产生不良行为。

解决方案 2：（推荐）移动文件列表并删除放置目标之外的按钮。设计您的放置目标以完成其一项功能 - 接受文件放置和调用文件上传操作的鼠标单击。

于 2021-10-18T02:28:33.487 回答