README

Yii2 Alert 小部件

基于 SweetAlert 的 Alert 小部件

安装

安装此扩展的首选方式是通过 composer。

运行以下命令：

php composer.phar require --prefer-dist yii2mod/yii2-sweet-alert "*"

或者将以下内容添加到你的 composer.json 文件中的 require 部分：

"yii2mod/yii2-sweet-alert": "*"

用法

要从会话闪存中渲染消息，可以使用以下代码

1. 在您的操作中设置消息，例如

Yii::$app->session->setFlash('success', 'This is the message');

1. 简单地按以下方式将小部件添加到您的页面中

echo Alert::widget();

要渲染自定义消息，可以使用以下代码

// A replacement for the "prompt" function

echo \yii2mod\alert\Alert::widget([
    'useSessionFlash' => false,
    'options' => [
        'timer' => null,
        'type' => \yii2mod\alert\Alert::TYPE_INPUT,
        'title' => 'An input!',
        'text' => "Write something interesting",
        'confirmButtonText' => "Yes, delete it!",
        'closeOnConfirm' => false,
        'showCancelButton' => true,
        'animation' => "slide-from-top",
        'inputPlaceholder' => "Write something"
    ],
    'callback' => new \yii\web\JsExpression(' function(inputValue) { 
                if (inputValue === false) return false;      
                if (inputValue === "") { 
                    swal.showInputError("You need to write something!");     
                    return false;   
                }      
                swal("Nice!", "You wrote: " + inputValue, "success"); 
    }')
]);

您还可以更改 SweetAlert 的主题！

要更改主题，您可以在应用程序配置中配置 assetManager 数组

// twitter theme

'assetManager' => [
    'bundles' => [
        'yii2mod\alert\AlertAsset' => [
            'css' => [
                'dist/sweetalert.css',
                'themes/twitter/twitter.css',
            ]
        ],
    ],
]

您可以使用以下代码覆盖 Yii2 默认的 data-confirm 弹出窗口

基本步骤是包含资产，然后添加以下 JS

/**
 * Override the default yii confirm dialog. This function is
 * called by yii when a confirmation is requested.
 *
 * @param message the message to display
 * @param okCallback triggered when confirmation is true
 * @param cancelCallback callback triggered when cancelled
 */
yii.confirm = function (message, okCallback, cancelCallback) {
    swal({
        title: message,
        type: 'warning',
        showCancelButton: true,
        closeOnConfirm: true,
        allowOutsideClick: true
    }, okCallback);
};

Alert 选项

您可以在 选项页面 上找到它们