Mudblazor

Question

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

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

问题是实际的拖放区域设置为position: absolute none.

有办法解决吗？

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

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

Answer 1

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

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

.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：（推荐） 将您的文件列表和删除按钮移到放置目标之外。设计您的放置目标以执行其一项功能 - 接受文件放置和调用文件上传操作的鼠标单击。

Answer 2

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

正如 Memetican 所说，.drag-drop-input 似乎覆盖了其他内容。我不知道我在做什么，所以我不会给出解释，但是 position: absolute; 部分引起了我的兴趣。读到它 here 促使我将它从 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);
    }
}

Mudblazor - 在拖放区域内单击

Mudblazor - Click inside the zone of the drag and drop

javascript

c#

css

blazor