Blazor 和 AlpineJS——点击远离子组件答案

【问题标题】：Blazor and AlpineJS -- click away from child ComponentBlazor 和 AlpineJS——点击远离子组件
【发布时间】：2021-02-21 05:36:51
【问题描述】：

我正在尝试在用户点击卡片时显示下拉部分。这是一个使用 .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 的加载顺序有关吗？有办法解决吗？

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

非常感谢！

【问题讨论】：

标签： .net blazor blazor-webassembly blazor-client-side alpine.js

【解决方案1】：

尝试将“@”替换为“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>

【讨论】：