README

Livewire Alert 是一个简单的警报工具包，旨在无缝集成到您的 Livewire 组件中。在底层，它利用 SweetAlert2，为您提供 SweetAlert2 的功能，而无需任何自定义 JavaScript。

交互式演示

在此处查看交互式演示：https://livewire-alert.jantinnerezo.com

为交互式演示做出贡献

您是否有任何想法可以添加到交互式演示中？在此处 fork 并提交 PR：https://github.com/jantinnerezo/livewire-alert-demo

安装

您可以通过 composer 安装此包

composer require jantinnerezo/livewire-alert

接下来，在 @livewireScripts 之后将脚本组件添加到您的模板中。

SweetAlert2 脚本默认不包含，确保在 livewire alert 脚本之前包含它。

<body> 

  @livewireScripts

  <script src="//cdn.jsdelivr.net.cn/npm/sweetalert2@11"></script>
  
  <x-livewire-alert::scripts />
  
</body>

您还可以通过发布 livewire-alert.js 手动包含脚本

php artisan vendor:publish --tag=livewire-alert:assets

然后在您的视图中，您可以包含已发布的脚本，而不是使用 <x-livewire-alert::scripts /> 组件包含内联脚本。

如果您选择此路径，请确保在 livewire-alert 脚本之后立即包含 <x-livewire-alert::flash />，如果您仍然想要闪存功能。

<script src="{{ asset('vendor/livewire-alert/livewire-alert.js') }}"></script> 
<x-livewire-alert::flash />

要求

此包旨在与 Livewire 组件一起使用。请确保您仅在使用 Livewire 项目时使用它。

PHP 8.1 或更高版本
Laravel 7、8、9 和 10
Livewire
SweetAlert2

使用方法

您可以通过使用 LivewireAlert 特性来使用 livewire alert。

use Jantinnerezo\LivewireAlert\LivewireAlert;
 
class Index extends Component
{
    use LivewireAlert;
    
    public function submit()
    {
        $this->alert('success', 'Basic Alert');
    }
}

显示不同的警报图标。

默认的警报行为是 toast 通知。

$this->alert('success', 'Success is approaching!');

$this->alert('error', 'Wrong email or password!');

$this->alert('warning', 'The world has warned you.');

$this->alert('info', 'The fact is you know your name :D');

$this->alert('question', 'How are you today?');

禁用 toast 通知警报处理。

$this->alert('info', 'This is not as toast alert', [
    'toast' => false
]);

警报位置

$this->alert('info', 'Centering alert', [
    'position' => 'center'
]);

以下警报位置列表

top
top-start
top-end
center
center-start
center-end
bottom
bottom-start
bottom-end

按钮

SweetAlert2 有 3 个默认不显示的按钮。

要显示确认按钮，只需将 showConfirmButton 传递给警报配置并将其设置为 true。

$this->alert('question', 'How are you today?', [
    'showConfirmButton' => true
]);

更改确认按钮文本

$this->alert('question', 'How are you today?', [
    'showConfirmButton' => true,
    'confirmButtonText' => 'Good'
]);

添加当确认按钮被点击时的事件。首先创建一个当确认按钮被点击时会调用的函数

public function confirmed()
{
    // Do something
}

将其添加到事件监听器数组中以注册它。

protected $listeners = [
    'confirmed'
];

或者

public function getListeners()
{
    return [
    	'confirmed'
    ];
}

然后将其传递到警报配置的 onConfirmed 键。

$this->alert('question', 'How are you today?', [
    'showConfirmButton' => true,
    'confirmButtonText' => 'Good',
    'onConfirmed' => 'confirmed' 
]);

您还可以将参数传递给事件以获取警报响应。

当您需要获取警报内的输入值时非常有用。

$this->alert('warning', 'Please enter password', [
    'showConfirmButton' => true,
    'confirmButtonText' => 'Submit',
    'onConfirmed' => 'confirmed',
    'input' => 'password',
    'inputValidator' => '(value) => new Promise((resolve) => '.
        '  resolve('.
        '    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&]).{8,}$/.test(value) ?'.
        '    undefined : "Error in password"'.
        '  )'.
        ')',    
    'allowOutsideClick' => false,
    'timer' => null
]);

public function confirmed($data)
{
    // Get input value and do anything you want to it
    $password = $data['value'];
}

只需对 deny 和 cancel 按钮做同样的事情。只需为每个按钮创建一个函数并将它注册到事件监听器中。

public function denied() 
{
    // Do something when denied button is clicked
}

public function cancelled() 
{
    // Do something when cancel button is clicked
}

public function getListeners()
{
    return [
    	'denied',
      'dismissed'
    ];
}

请确保将 showDenyButton 和 showCancelButton 设置为 true。

$this->alert('warning', 'Alert with deny and cancel button', [
    'showDenyButton' => true,
    'denyButtonText' => 'Deny',
    'showCancelButton' => true,
    'cancelButtonText' => 'Cancel',
    'onDenied' => 'denied',
    'onDismissed' => 'cancelled'
]);

向特定组件发出事件。而不是直接将监听器传递给事件，请传递一个包含 component 和 listeners 键的数组。

'onConfirmed' => [
   'component' => 'livewire-component',
   'listener' => 'confirmed'
];

不想每次显示警报确认时都定义额外的按钮配置？请使用 confirm 方法。

您始终可以覆盖默认的确认设置，只需调整配置即可。

$this->confirm('Are you sure do want to leave?', [
    'onConfirmed' => 'confirmed',
]);

闪存通知

您还可以使用 alert 作为闪存通知。您可以在第四个参数中传递重定向路由，默认重定向到 /。

$this->flash('success', 'Successfully submitted form', [], '/');

配置

通过发布 livewire-alert.php 配置文件来覆盖默认的 alert 配置。

php artisan vendor:publish --tag=livewire-alert:config

[
    'alert' => [
        'position' => 'top-end',
        'timer' => 3000,
        'toast' => true,
        'text' => null,
        'showCancelButton' => false,
        'showConfirmButton' => false
    ],
    'confirm' => [
        'icon' => 'warning',
        'position' => 'center',
        'toast' => false,
        'timer' => null,
        'showConfirmButton' => true,
        'showCancelButton' => true,
        'cancelButtonText' => 'No',
        'confirmButtonColor' => '#3085d6',
        'cancelButtonColor' => '#d33'
    ]
]

自定义

您可以通过传递自定义类来自定义 alert 样式，与 TailwindCSS 结合使用效果极佳。

[
  'customClass' => [
    'container' => '',
    'popup' => '',
    'header' => '',
    'title' => '',
    'closeButton' => '',
    'icon' => '',
    'image' => '',
    'content' => '',
    'htmlContainer' => '',
    'input' => '',
    'inputLabel' => '',
    'validationMessage' => '',
    'actions' => '',
    'confirmButton' => '',
    'denyButton' => '',
    'cancelButton' => '',
    'loader' => '',
    'footer' => ''
   ]
];

有关自定义和配置的更多详细信息，请查看 SweetAlert2。

贡献者

变更日志

有关最近更改的详细信息，请参阅变更日志。

贡献

有关详细信息，请参阅贡献指南。

安全

如果您发现任何安全相关的问题，请通过电子邮件 erezojantinn@gmail.com 联系，而不是使用问题跟踪器。

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅许可证文件。

jantinnerezo / livewire-alert

维护者

详细信息