时间戳

首页 > 解决方案 > Blazor 和 AlpineJS——点击远离子组件

.net - Blazor 和 AlpineJS——点击远离子组件

问题描述

我正在尝试在用户单击卡片时显示下拉部分。这是一个使用 .net 5 的 Blazor WebAssembly 项目。

Alpine 有很酷的动画，所以我正在尝试使用它，但是在尝试将 @click.away 属性放在包含我的组件的 div 上时会出错。

下面给我一个“发生未处理的错误”：

<div x-data="{ open: false }">
     <button @click="open = !open"  class="relative">
        <p>hello</p>
     </button

     <div x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="w-full mt-2 origin-top-right rounded-md shadow-lg">
    <Card/>
     </div>
</div>

不过，将 @click.away 移动到按钮对我来说效果很好：

<div x-data="{ open: false }">
     <button @click.away="open = false" @click="open = !open"  class="relative">
        <p>hello</p>
     </button

     <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="w-full mt-2 origin-top-right rounded-md shadow-lg">
    <Card />
     </div>
</div>

唯一的问题是，当我单击 Card 组件而不是按钮外部时，我希望下拉部分隐藏（使用动画）。

这是简化的 Card.razor：

<button>
I'm larry
</button>

否则我基本上使用默认项目。这是 alpinejs 脚本：

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

我花了很长时间把它缩小到这么远。我在想这与 Javascript 的加载顺序有关吗？有没有办法解决这个问题？

有谁知道解决这个问题的方法？如果在单击/单击远离组件时还有其他方式可以提供动画。

太感谢了！

标签： .netblazorblazor-webassemblyblazor-client-sidealpine.js

解决方案

尝试用“x-on”替换“@”。

我认为使用 Alpine '@' 快捷方式会使 Blazor 与其@onclick 事件混淆。我正在做类似的事情并且x-on:click.away正在工作。

此外，您似乎可以使用它来将 Alpine 和 Blazor 连接到事件。我在 .Net 6 中使用 Blazor 服务器端。

<button x-on:click="open = !open"  @onclick="CloseDialog" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm">
                            Deactivate
</button>

推荐阅读