Директива wire:click.outside

Директива wire:click.outside вешается на HTML-элемент и вызывает указанный метод компонента при клике вне этого элемента. В значение передаётся имя публичного метода. После вызова Livewire обновляет шаблон компонента. Эта директива часто используется для закрытия модальных окон, выпадающих меню или снятия выделения.

Синтаксис

<div wire:click.outside="methodName">
	Content
</div>

Пример

Давайте покажем блок с текстом и скроем его по клику вне этого блока:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Block extends Component
	{
		public $show = true;

		public function hide()
		{
			$this->show = false;
		}

		public function render()
		{
			return view('livewire.block');
		}
	}
?>

<div>
	@if ($show)
		<div wire:click.outside="hide" style="padding: 20px; border: 1px solid #ccc;">
			Click outside this block to hide it.
		</div>
	@endif
</div>

Результат выполнения кода (показан блок):

<div>
	<div style="padding: 20px; border: 1px solid #ccc;">
		Click outside this block to hide it.
	</div>
</div>

После клика вне блока он скрывается:

<div>
	<!-- Block is hidden -->
</div>

Пример

Давайте передадим в метод параметр false для более гибкого управления состоянием:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Block extends Component
	{
		public $show = true;

		public function setVisibility($state)
		{
			$this->show = $state;
		}

		public function render()
		{
			return view('livewire.block');
		}
	}
?>

<div>
	@if ($show)
		<div wire:click.outside="setVisibility(false)" style="padding: 20px; border: 1px solid #ccc;">
			Click outside to hide.
		</div>
	@endif
	<button wire:click="setVisibility(true)">Show block</button>
</div>

Результат выполнения кода (показан блок и кнопка):

<div>
	<div style="padding: 20px; border: 1px solid #ccc;">
		Click outside to hide.
	</div>
	<button>Show block</button>
</div>

После клика вне блока он скрывается, а кнопка позволяет показать его снова:

<div>
	<button>Show block</button>
</div>

Смотрите также

директиву wire:click,
которая обрабатывает клик на элементе
директиву wire:click.self,
которая вызывает метод только при клике на сам элемент
директиву wire:click.stop,
которая предотвращает всплытие события клика
директиву wire:click.prevent,
которая отменяет действие браузера по умолчанию