README

简介

此包是uxweb/sweet-alert的分支。我们添加了针对Laravel 9和10兼容性的更新。所有权利和信誉归原始包uxweb/sweet-alert所有。

安装

使用Composer安装此包。

composer require mr-mokhtari/sweet-alert

如果使用laravel < 5.5，请在config/app.php中包含服务提供者和别名。

'providers' => [
    UxWeb\SweetAlert\SweetAlertServiceProvider::class,
];

'aliases' => [
    'Alert' => UxWeb\SweetAlert\SweetAlert::class,
];

安装前端依赖

此包仅通过使用JAVASCRIPT的"ALERT"的美丽替代品来工作。

使用CDN

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Include this in your blade layout -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  </head>
  <body>
    @include('sweet::alert')
  </body>
</html>

使用Laravel Mix

使用Yarn安装

yarn add sweetalert --dev

使用NPM安装

npm install sweetalert --save-dev

在您的resources/js/bootstrap.js文件中要求sweetalert。

// ...

require("sweetalert");

// ...

然后确保在您的blade布局中包含您的脚本。如果您的script标签中包含它，请删除defer属性，因为defer将延迟脚本的执行，这会导致错误，因为浏览器将sweet::alert blade模板首先作为HTML渲染。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
  </head>
  <body>
    @include('sweet::alert')
  </body>
</html>

最后使用Mix编译您的资产

npm run dev

用法

使用外观

首先在您的控制器中导入SweetAlert外观。

use SweetAlert;

在您的控制器中，在执行重定向之前...

public function store()
{
    SweetAlert::message('Robots are working!');

    return Redirect::home();
}

以下是一些如何使用外观的示例

SweetAlert::message('Message', 'Optional Title');

SweetAlert::basic('Basic Message', 'Mandatory Title');

SweetAlert::info('Info Message', 'Optional Title');

SweetAlert::success('Success Message', 'Optional Title');

SweetAlert::error('Error Message', 'Optional Title');

SweetAlert::warning('Warning Message', 'Optional Title');

使用辅助函数

alert($message = null, $title = '')

除了之前列出的方法外，您还可以直接使用辅助函数而不指定任何消息类型。这样做类似于

alert()->message('Message', 'Optional Title')

与外观一样，我们可以使用相同的函数和方法使用辅助函数

alert()->message('Message', 'Optional Title');

alert()->basic('Basic Message', 'Mandatory Title');

alert()->info('Info Message', 'Optional Title');

alert()->success('Success Message', 'Optional Title');

alert()->error('Error Message', 'Optional Title');

alert()->warning('Warning Message', 'Optional Title');

alert()->basic('Basic Message', 'Mandatory Title')->autoclose(3500);

alert()->error('Error Message', 'Optional Title')->persistent('Close');

在您的控制器中，在执行重定向之前...

/**
 * Destroy the user's session (logout).
 *
 * @return Response
 */
public function destroy()
{
    Auth::logout();

    alert()->success('You have been logged out.', 'Good bye!');

    return home();
}

对于一般信息警报，只需这样做：alert('Some message');（与alert()->message('Some message');相同）。

使用中间件

中间件组

首先通过简单地将中间件类UxWeb\SweetAlert\ConvertMessagesIntoSweetAlert::class添加到您的app/Http/Kernel.php类的$middlewareGroups中，在web中间件组中注册中间件。

protected $middlewareGroups = [
    'web' => [
        \App\Http\Middleware\EncryptCookies::class,
        ...
        \UxWeb\SweetAlert\ConvertMessagesIntoSweetAlert::class,
    ],

    'api' => [
        'throttle:60,1',
    ],
];

请确保您仅在'web'组中注册中间件。

路由中间件

或者，如果您只想将中间件分配给特定路由，则应将中间件添加到app/Http/Kernel.php文件中的$routeMiddleware。

protected $routeMiddleware = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    ....
    'sweetalert' => \UxWeb\SweetAlert\ConvertMessagesIntoSweetAlert::class,
];

下一步：在您的控制器中，设置您的返回消息（使用with()）并发送适当的消息和类型。

return redirect('dashboard')->with('success', 'Profile updated!');

或

return redirect()->back()->with('error', 'Profile updated!');

注意：当使用中间件时，如果检测到以下密钥闪存到会话中：`error`，`success`，`warning`，`info`，`message`，`basic`，则将显示警报。

最终考虑

默认情况下，所有警报都会在合理的默认秒数后消失。

但不用担心，如果您需要指定不同的时间，您可以

// -> Remember!, the number is set in milliseconds
alert('Hello World!')->autoclose(3000);

此外，如果您需要使警报在页面上持续存在，直到用户通过按确认按钮将其关闭

// -> The text will appear in the button
alert('Hello World!')->persistent("Close this");

您可以使用html()方法在消息中渲染HTML，如下所示

// -> html will be evaluated
alert('<a href="#">Click me</a>')->html()->persistent("No, thanks");

自定义

配置

如果您需要自定义此包的默认配置选项，只需导出配置文件

php artisan vendor:publish --provider "UxWeb\SweetAlert\SweetAlertServiceProvider" --tag=config

将一个 sweet-alert.php 配置文件发布到您的 config 目录。到目前为止，唯一可以更改的配置是所有自动关闭警告的计时器。

查看

如果您需要自定义包含的警告信息视图，请运行

php artisan vendor:publish --provider "UxWeb\SweetAlert\SweetAlertServiceProvider" --tag=views

包视图位于 resources/views/vendor/sweet/ 目录。

您可以根据需要自定义此视图。

配置选项

您可以通过以下配置选项来构建自定义视图

Session::get('sweet_alert.text')
Session::get('sweet_alert.title')
Session::get('sweet_alert.icon')
Session::get('sweet_alert.closeOnClickOutside')
Session::get('sweet_alert.buttons')
Session::get('sweet_alert.timer')

请查看网站中的 CONFIGURATION 部分，了解所有其他可用选项。

默认视图

sweet_alert.alert 会话键包含一个 JSON 配置对象，可以直接传递给 Sweet Alert。

@if (Session::has('sweet_alert.alert'))
<script>
  swal({!! Session::get('sweet_alert.alert') !!});
</script>
@endif

请注意，使用 {!! !!} 来输出未转义的 JSON 配置对象，它不会与 {{ }} 转义输出标签一起工作。

自定义视图

以下是一个如何自定义视图以适应您的需求的示例

@if (Session::has('sweet_alert.alert'))
<script>
  swal({
      text: "{!! Session::get('sweet_alert.text') !!}",
      title: "{!! Session::get('sweet_alert.title') !!}",
      timer: {!! Session::get('sweet_alert.timer') !!},
      icon: "{!! Session::get('sweet_alert.type') !!}",
      buttons: "{!! Session::get('sweet_alert.buttons') !!}",

      // more options
  });
</script>
@endif

请注意，除了计时器选项外，您必须使用 ""（双引号）来包围值。

测试

要运行包含的测试套件

vendor/bin/phpunit

演示

SweetAlert::message('Welcome back!');

return Redirect::home();

SweetAlert::message('Your profile is up to date', 'Wonderful!');

return Redirect::home();

SweetAlert::message('Thanks for comment!')->persistent('Close');

return Redirect::home();

SweetAlert::info('Email was sent!');

return Redirect::home();

SweetAlert::error('Something went wrong', 'Oops!');

return Redirect::home();

SweetAlert::success('Good job!');

return Redirect::home();

SweetAlert::info('Random lorempixel.com : <img src="http://lorempixel.com/150/150/">')->html();

return Redirect::home();

SweetAlert::success('Good job!')->persistent("Close");

return Redirect::home();

许可证

Sweet Alert for Laravel 是开源软件，采用MIT 许可证。

mr-mokhtari / sweet-alert

维护者

详细信息