laravel - 您将如何处理 Livewire 弹出框?
问题描述
我正在寻找一种在 Livewire 中制作弹出框/工具提示的方法,最好不使用 Vue。
到目前为止,我已经创建了一个 UserPopover Livewire 组件:
namespace App\Http\Livewire;
use App\User;
use Livewire\Component;
class UserPopover extends Component
{
public $isOpen = false;
public $user = null;
protected $listeners = [
'closeUserPopover',
'showUserPopover' => 'open',
];
public function open($username)
{
$this->user = User::whereName($username)->first();
$this->isOpen = true;
}
public function closeUserPopover()
{
$this->isOpen = false;
}
public function render()
{
return view('livewire.user-popover');
}
}
并渲染组件:
<div>
@if($isOpen)
<div class="user-popover fixed top-0 shadow bg-white p-6 text-sm">
<h3>{{ $user->name }}</h3>
<div>{{ $user->profile->bio }}</div>
</div>
@endif
</div>
在我的app.blade.php
文件中,我已将其包含在其中,@livewire('user-popover')
并且我正在调用该组件:
<a href="{{ route('users.show', $user) }}"
wire:mouseover="$emit('showUserPopover', {{ $user->name }})"
wire:mouseout="$emit('closeUserPopover')"
>
{{ $user->name }}
</a>
我不知道下一步该做什么。关于定位、可重用性和整体架构的任何想法?
解决方案
例如:您可以使用此工具提示:
现在,当 isOpen 为 true 时,您可以有条件地呈现类名(css 类包含工具提示样式)。
<a class="{{ $isOpen ? 'tooltip' : '' }}" href="{{ route('users.show', $user) }}"
wire:mouseover="$emit('showUserPopover', {{ $user->name }})"
wire:mouseout="$emit('closeUserPopover')"
>
<span class="{{ $isOpen ? 'tooltiptext' : '' }}"> {{ $user->name }} </span>
</a>
推荐阅读
- javascript - 反应事件点击不适用于特定元素
- spring-boot - Spring boot,spring data jpa应用程序-如何检查正在使用的连接池?
- http - 未设置 Set-Cookie(本地 DEV 环境)
- python - __init__() 接受 1 个位置参数,但给出了 2 个 | /accounts/login/$ 处的类型错误
- json - 尝试为我的 API Hack 任务呈现结果时出现 404 错误
- java - 从 GridY 区域中删除所有元素
- css - 我可以制作一个 flexbox,因此它的孩子继承屏幕的高度,这样做,让最后一个孩子坚持到底吗?
- vba - excel中的VBA问题用于启用/禁用单元格
- java - Caused by: java.lang.ClassNotFoundException: org.springframework.web.servlet.config.annotation.AsyncSupportConfigurer
- python - Pandas DataFrame - 合并两个 DataFrame 以确定历史/转换