README

live-controls 的 Alerts 库

要求

• Laravel 9+
• Livewire 2+

翻译

• 英语（en）
• 德语（de）
• 巴西葡萄牙语（pt_BR）

安装

1. 安装 Alerts 包

composer require live-controls/alerts

1. 在 /body 标签之前将 @livewire('livecontrols-sweetalert') 包含到布局中

用法

第一步：将 HasPopups 特性添加到 Livewire Controls 或使用 redirect() 的类中。

use HasPopups;

新系统

新系统相比旧系统有许多优点，您不仅可以设置自定义标题和按钮，还可以在用户按下确认、拒绝或取消按钮时调用 Livewire 事件。未来可能会添加更多选项。

必需参数：'type' 和 'message'，其余为可选

来自控制器

$alertType = 'success'; //Can be success, warning, error, info and question
$alertTitle = 'Some Title'; //Will be shown as title
$alertMessage = 'This is some message'; //can contain HTML so be aware of that!
$alertConfirmButtonText = 'Confirm'; //The text shown on the confirm button, if you dont want to show the button set it to null or don't set it in the call
$alertDenyButtonText = 'Deny'; //Same as confirm button
$alertCancelButtonText = 'Cancel'; //Same as confirm button
$alertConfirmEvent = 'confirmed'; //The name of the event that will be called when the user clicks on the confirm button set to null or don't set it in the call to ignore it
$alertDenyEvent = 'denied'; //Same as confirm event
$alertCancelEvent = 'canceled'; //Same as confirm event

//New in 0.4-dev
$alertTimer = 2000; //Will close the window after 2000ms
$alertTimerProgressBar = true; //If set to true it will show a progressbar on the bottom
$alertImageUrl = 'https://yourpage.com/somepicture.jpg'; //Sets a picture for the alert
$alertImageHeight = 100; //Sets the height of the image
$alertImageWidth = 100; //Sets the width of the image
$alertImageAlt = 'Some Text'; //Sets an alternative text to the image
$alertHtml = '<strong>I'm strong!</strong>'; //Sets the html of the message, ignores message if set! Take care with that and don't allow userinput on this one!

return redirect()->route('dashboard')->with('alert', [
'type' => $alertType,
'title' => $alertTitle,
'message' => $alertMessage,
'confirmButtonText' => $alertConfirmButtonText,
'denyButtonText' => $alertDenyButtonText,
'cancelButtonText' => $alertCancelButtonText,
'confirmEvent' => $alertConfirmEvent,
'denyEvent' => $alertDenyEvent,
'cancelEvent' => $alertCancelEvent,

'timer' => $alertTimer,
'timerProgressBar' => $alertTimerProgressBar,
'imageUrl' => $alertImageUrl,
'imageHeight' => $alertImageHeight,
'imageWidth' => $alertImageWidth,
'imageAlt' => $alertImageAlt,
'html' => $alertHtml
]');

//New in 0.5-dev
return redirect()->route('dashboard')->alert(['type' => 'success', 'message' => 'Hello World!']);

来自 Livewire

$this->dispatchBrowserEvent('alert', [
 'type' => 'error',
 'title' => 'Test Title',
 'message' => 'It\'s working!',
 'confirmButtonText' => 'Confirm',
 'denyButtonText' => 'Deny',
 'cancelButtonText' => 'Cancel',
 'confirmEvent' => 'confirmPopup',
 'denyEvent' => 'denyPopup',
 'cancelEvent' => 'cancelPopup',

//new in 0.4-dev
'timer' => 2000,
'timerProgressBar' => true,
'imageUrl' => 'https://yourpage.com/cat.jpg',
'imageHeight' => 200,
'imageWidth' => 200,
'imageAlt' => 'A cute cat!',
'html' => '<strong>Im strong!</strong>'
]);

//New in 0.5-dev
$this->alert([
'type' => 'info',
'message' => 'Hello World!'
]);

旧系统

如果您想使用旧系统，可以发送一个会话变量，如下所示

来自控制器

return redirect()->route('dashboard')->with('success', 'This had success!'); //Will show a success popup
return redirect()->route('dashboard')->with('exception'), 'This had an exception!'); //Will show an error popup
return redirect()->route('dashboard')->with('info', 'This is an information'); //Will show an info popup
return redirect()->route('dashboard')->with('warning', 'This is a warning'); //Will show a warning popup

来自 Livewire

$this->dispatchBrowserEvent('showAlert', ['success', 'This had success!']); //Will show a success popup
$this->dispatchBrowserEvent('showAlert', ['exception', 'This had an exception']); //Will show an error popup
$this->dispatchBrowserEvent('showAlert', ['info', 'This is an information']); //Will show an info popup
$this->dispatchBrowserEvent('showAlert', ['warning', 'This is a warning']); //Will show a warning popup

如您所见，旧系统非常有限，您只能向其中添加消息，这就是全部。如果您正在开发新项目，请使用新系统！

手动安装

如果您更喜欢自己安装 SweetAlert2 脚本，请按照以下说明操作：安装：https://sweetalert2.github.io/#download 主题安装：https://github.com/sweetalert2/sweetalert2-themes