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

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

Данная директива полезна, когда нужно обработать клик вне определённого элемента, например, для закрытия модального окна или выпадающего меню при клике где-то на странице.

Синтаксис

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

Пример

Давайте создадим компонент, который показывает всплывающее сообщение при клике в любом месте окна:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class WindowClick extends Component
	{
		public $message = '';
		
		public function handleWindowClick()
		{
			$this->message = 'Window clicked at ' . date('H:i:s');
		}
		
		public function render()
		{
			return view('livewire.window-click');
		}
	}
?>

<div wire:click.window="handleWindowClick">
	<h3>Click anywhere on the page</h3>
	<p>Last click: {{ $message }}</p>
</div>

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

<div>
	<h3>Click anywhere on the page</h3>
	<p>Last click: Window clicked at 14:25:30</p>
</div>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Modal extends Component
	{
		public $isOpen = false;
		
		public function open()
		{
			$this->isOpen = true;
		}
		
		public function close()
		{
			$this->isOpen = false;
		}
		
		public function toggle()
		{
			$this->isOpen = !$this->isOpen;
		}
		
		public function render()
		{
			return view('livewire.modal');
		}
	}
?>

<div wire:click.window="close">
	<button wire:click="toggle">
		Toggle modal
	</button>
	
	@if ($isOpen)
		<div style="background: white; border: 1px solid #ccc; padding: 20px; margin: 20px;">
			<h3>Modal window</h3>
			<p>Click anywhere outside this modal to close it</p>
		</div>
	@endif
</div>

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

<div>
	<button>
		Toggle modal
	</button>
	<div style="background: white; border: 1px solid #ccc; padding: 20px; margin: 20px;">
		<h3>Modal window</h3>
		<p>Click anywhere outside this modal to close it</p>
	</div>
</div>

Важно отметить, что директива wire:click.window будет срабатывать на клики в любом месте окна, включая клики по самому элементу, на котором она висит. Чтобы избежать нежелательного срабатывания при клике внутри модального окна, можно использовать модификатор self.

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

директиву wire:click,
которая обрабатывает клик по конкретному элементу
директиву wire:click.document,
которая слушает клики на объекте document
директиву wire:click.self,
которая обрабатывает клик только по самому элементу
директиву wire:click.outside,
которая обрабатывает клик только вне элемента