Laravel 8 livewire 在任务完成或在其外部单击页面时隐藏菜单组件

Posted 2023-03-21

【中文标题】Laravel 8 livewire 在任务完成或在其外部单击页面时隐藏菜单组件

【英文标题】：Laravel 8 livewire hide menu component when task finished or page clicked outside of it

【发布时间】：2022-01-17 23:20:58

【问题描述】：

我的问题，我有一个包含 Accounts 的表格，最后一列是 livewire 组件。目前我可以在此之外单击并且它不会隐藏。当登录（使用 jetstream）时，组件本身是管理帐户下拉菜单的克隆。

我的代码： 资源/视图/livewire/account-menu-component.blade.php

<div>
    <div class=" focus:outline-none focus:border-gray-300 transition hamburger" wire:click="$toggle('showDiv')" title="Click to show menu">
        <i class="fa-2x fa fa-bars"></i>
    </div>
    @if ($showDiv)
    <div class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0 ring-1 ring-black ring-opacity-5 py-1 bg-white">
        <div class="block px-4 py-2 text-xs text-gray-400">
             $account->name 
        </div>
        <a class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 "
           href=" URL::to( 'accounts/' . $account->id . '/edit' ) ">Edit
        </a>
        <a class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
           href=" URL::to( 'accounts/' . $account->id . '/destroy' ) ">Delete
        </a>
    </div>
    @endif
</div>

app/Http/Livewire/AccountMenuComponent.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class AccountMenuComponent extends Component

    public $account;
    public $showDiv = false;

    public function render()
    
        return view('livewire.account-menu-component');
    

在我的 index.blade.php 文件中表格行的最后 td 是 @livewire( 'account-menu-component', ['account' => $value] ) 其中$value 是行本身的帐户数据。

如果我单击此组件之外的行（或在另一行上，或者如果我单击另一个汉堡包以显示另一行），它将保持打开状态，关闭它的唯一方法是再次单击汉堡包图标。

那么，如果我在此组件外部单击以及当其中一个锚点被单击时，我该如何关闭它？我更喜欢 livewire 解决方案，而不是需要添加 id 元素等的 javascript/jQuery 示例。Jetstream 在登录时使用的菜单完全符合我的要求。

有什么想法吗？

谢谢

克雷格

【参考方案1】：

我发现我可以根据需要进行以下修改（但让它褪色会很好） 资源/视图/livewire/account-menu-component.blade.php

<div>
    <div class=" focus:outline-none focus:border-gray-300 transition hamburger" wire:click="$toggle('showDiv')" title="Click to show menu">
        <i class="fa-2x fa fa-bars"></i>
    </div>
    @if ($showDiv)
    <div x-on:click.away="if($wire.get('showDiv')==true)  $wire.hideDiv() " class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0 ring-1 ring-black ring-opacity-5 py-1 bg-white">
        <div class="block px-4 py-2 text-xs text-gray-400">
             $account->name 
        </div>
        <a class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 "
           href=" URL::to( 'accounts/' . $account->id . '/edit' ) ">Edit
        </a>
        <a class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
           href=" URL::to( 'accounts/' . $account->id . '/destroy' ) ">Delete
        </a>
    </div>
    @endif
</div>

然后我将 hideDiv 函数添加到 AccountMenuComponent 文件中

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class AccountMenuComponent extends Component

    public $account;
    public $showDiv = false;

    public function render()
    
        return view('livewire.account-menu-component');
    

    public function hideDiv() 
        $this->showDiv = false;
        return view('livewire.account-menu-component');
    

希望这对其他人有所帮助。 Laravel livewire 开发者似乎无意引入此功能。