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

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

Синтаксис

<button wire:click.document="methodName">
	text
</button>

Пример

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

<?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 render()
		{
			return view('livewire.modal');
		}
	}
?>

<div>
	<button wire:click="open">
		Open modal
	</button>
	
	@if ($isOpen)
		<div wire:click.document="close" style="
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			display: flex;
			justify-content: center;
			align-items: center;
		">
			<div style="background: white; padding: 20px;">
				Modal content
			</div>
		</div>
	@endif
</div>

Пример

Давайте реализуем компонент для отслеживания количества кликов в любом месте документа:

<?php
	
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ClicksCounter extends Component
	{
		public $clicks = 0;
		
		public function increment()
		{
			$this->clicks++;
		}
		
		public function render()
		{
			return view('livewire.clicks-counter');
		}
	}
?>

<div wire:click.document="increment">
	Click anywhere on the page.
	<br>
	Total clicks: <span>{{ $clicks }}</span>
</div>

В этом примере клик по любому месту документа увеличит счётчик, так как директива висит на корневом элементе компонента с модификатором .document. При этом клик по самому элементу также будет обработан, так как событие всплывает до документа.

Пример

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

<?php
	
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ClickTracker extends Component
	{
		public $lastClick = '';
		
		public function track($message)
		{
			$this->lastClick = $message;
		}
		
		public function render()
		{
			return view('livewire.click-tracker');
		}
	}
?>

<div wire:click.document="track('Document click')">
	<button wire:click="track('Button click')">
		Click me
	</button>
	<p>
		Last event: {{ $lastClick }}
	</p>
</div>

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

<div>
	<button>
		Click me
	</button>
	<p>
		Last event: Document click
	</p>
</div>

Обратите внимание: при клике на кнопку сработает её собственный обработчик wire:click, а затем событие всплывёт до документа и вызовется обработчик wire:click.document на корневом элементе.

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

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