Как бы вы справились с поповером Livewire? - PullRequest
Новая
       22

Как бы вы справились с поповером Livewire?

1 голос
/ 26 февраля 2020

Я ищу способ сделать всплывающее окно / всплывающую подсказку в 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>

Я не знаю, что делать дальше. Есть идеи по позиционированию, повторному использованию и общей архитектуре?

1 Ответ

0 голосов
/ 27 февраля 2020

Например: вы можете использовать эту подсказку:

Теперь вы можете условно отобразить имя класса (css класс содержит стили всплывающей подсказки), когда isOpen имеет значение true. 

<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>
...