README

将 Livewire 与 Sweetalert 集成。

安装
如何使用
Toast
Fire
Confirm
可用的配置

安装

composer require akhaled/livewire-sweetalert

如何使用

1. 包含 JavaScript

    ...
    <script src="//cdn.jsdelivr.net.cn/npm/sweetalert2@11"></script>

    @livewireScripts
    @livewireSweetalertScripts
</body>

2. 额外的配置文件

发布配置： php artisan vendor:publish --tag=livewire-sweetalert-config。

见可用的配置

Toast

在你的组件中添加 Toast 特性。然后在你想要的位置调用 toast 方法。

use Akhaled\LivewireSweetalert\Toast;
use Livewire\Component;

class MyComponent extends Component
{
    use Toast;

    public function save() {
        $this->toast('Toast message', 'success', 5000);
    }
    ...
}

toast 参数

标题
图标：success, error, warning, info, question - 默认为 info
timeout：以毫秒为单位，默认为 5000

Fire

这是正常的 sweetalert 模态框。在你的组件中添加 Fire 特性。然后在你想要的位置调用 fire 方法。

use Akhaled\LivewireSweetalert\Fire;
use Livewire\Component;

class MyComponent extends Component
{
    use Fire;

    public function save() {
        $options = [];
        $this->Fire('Error happened', 'error', 'please try again later', $options);
    }
    ...
}

fire 参数

titleText：弹出窗口的标题，作为文本以避免 HTML 注入。
图标：success, error, warning, info, question - 默认为 info。
html：标题下显示的 HTML。
options：sweetalert 提供的所有选项。

Confirm

将 Confirm 特性添加到你的组件中。然后在你想要的位置调用 confirm 方法。在确认时，会发出 confirmed 事件。将其添加到组件的 $listeners 属性中。见示例

use Akhaled\LivewireSweetalert\Confirm;
use Livewire\Component;

class MyComponent extends Component
{
    use Confirm;

    protected $listeners = [
        'confirmed' => 'onConfirmation'
    ];

    public function delete()
    {
        $options = []; // default ['event' => 'confirmed']
        $this->confirm('Are you sure you want to delete', 'you can\'t revert that', $options);
    }

    public function onConfirmation()
    {
        dd('confirmed!');
    }
}

confirm 参数

title：弹出窗口的标题，作为文本以避免 HTML 注入。
html：标题下显示的 HTML。
options：sweetalert 提供的所有选项。 此外，还有用于在同一个组件上进行多次确认的事件键。见以下示例

多重确认组件

use Akhaled\LivewireSweetalert\Confirm;
use Livewire\Component;

class MyComponent extends Component
{
    use Confirm;

    protected $listeners = [
        'confirmed' => 'onConfirmation',
        'anotherConfirmed' => 'onAnotherConfirmation'
    ];

    public function delete()
    {
        $options = []; // default ['event' => 'confirmed']
        $this->confirm('Are you sure you want to delete', 'you can\'t revert that', $options);
    }

    public function onConfirmation()
    {
        dd('confirmed!');
    }

    public function anotherAction()
    {
        $options = [
            'event' => 'anotherConfirmed'; // <-- that's how it works!
        ];
        $this->confirm('Are you sure you want to delete', 'you can\'t revert that', $options);
    }

    public function onAnotherConfirmation()
    {
        dd('confirmed #2!');
    }
}

使用 PHP 8 属性

use Akhaled\LivewireSweetalert\Confirm;
use Livewire\Component;
use Livewire\Attributes\On;

class MyComponent extends Component
{
    use Confirm;

    public function confirmedWithAttribute()
    {
        $options = [
            'event' => 'phpOnAttribute';
        ];
        $this->confirm('Are you sure you want to delete', 'you can\'t revert that', $options)
    }

    #[On('phpOnAttribute')]
    public function onConfirmationWithAttribute()
    {
        dd('confirmed #3!');
    }
}

传递事件数据

use Akhaled\LivewireSweetalert\Confirm;
use Livewire\Component;
use Livewire\Attributes\On;

class MyComponent extends Component
{
    use Confirm;

    public function save()
    {
        $this->confirm(
            event: 'savedConfirmed',
            data: [
                'key' => 'value',
            ]
        )
    }

    #[On('savedConfirmed')]
    public function onSavedConfirmations(array $data)
    {
        dd($data['key']); // value
    }
}

akhaled / livewire-sweetalert

维护者

详细信息