通过 
搜索
搜索davidxu/yii2-sweetalert2-widget
为 Yii2 渲染 SweetAlert2 小部件。
v2.0.7
2022-09-17 09:34 UTC
Requires
- davidxu/yii2-base: ^1.0
- npm-asset/sweetalert2: ^11.4
Requires (Dev)
- phpunit/phpunit: ^6.0
- roave/security-advisories: dev-mater
README
为 Yii2 渲染 SweetAlert2 小部件。
安装
安装此扩展的首选方式是通过 composer。
运行
php composer.phar require davidxu/yii2-sweetalert2-widget "^2.0"
或者在您的 composer.json 文件的 require 部分添加
"davidxu/yii2-sweetalert2-widget": "^2.0"
使用
扩展安装完成后，只需在您的代码中通过以下方式使用它
闪存消息
视图
<?= \davidxu\sweetalert2\SweetAlert2::widget() ?>
控制器
<?php
Yii::$app->session->setFlash('', [
[
'title' => 'Auto close alert!',
'text' => 'I will close in 2 seconds.',
'timer' => 2000,
],
[
'callback' => new \yii\web\JsExpression("
function (result) {
// handle dismiss, result.dismiss can be 'cancel', 'overlay', 'close', and 'timer'
if (result.isConfirmed) {
return true;
}
}
"),
],
]);
渲染小部件
视图
<?php
use davidxu\sweetalert2\SweetAlert2;
带自动关闭计时器的消息
<?= SweetAlert2::widget([
'options' => [
'title' => 'Auto close alert!',
'text' => 'I will close in 2 seconds.',
'timer' => 2000,
],
'callback' => new \yii\web\JsExpression("
function (result) {
if (result.dismiss === 'timer') {
console.log('I was closed by the timer')
}
}
"),
]) ?>
自定义 HTML 描述和按钮
<?= SweetAlert2::widget([
'options' => [
'title' => '<i>HTML</i> <u>example</u>',
'icon' => 'success,
'html' => 'You can use <b>bold text</b>,'
. '<a href="//github.com">links</a> '
. 'and other HTML tags',
'showCloseButton' => true,
'showCancelButton' => true,
'confirmButtonText' => '<i class="fa fa-thumbs-up"></i> Great!',
'cancelButtonText' => '<i class="fa fa-thumbs-down"></i>',
],
]) ?>
一个警告消息，其中附加了“确认”按钮的函数...
<?= SweetAlert2::widget([
'options' => [
'title' => 'Are you sure?',
'text' => "You won't be able to revert this!",
'icon' =>'warning',
'showCancelButton' => true,
'confirmButtonColor' => '#3085d6',
'cancelButtonColor' => '#d33',
'confirmButtonText' => 'Yes, delete it!',
],
'callback' => new \yii\web\JsExpression("
function (result) {
if(result.value === true){
swal.fire('Deleted!','Your file has been deleted.','success')
}
}
"),
]) ?>
... 通过传递参数，您可以执行“取消”的另一个操作。
<?= SweetAlert2::widget([
'options' => [
'title' => 'Are you sure?',
'text' => "You won't be able to revert this!",
'icon' =>'warning',
'showCancelButton' => true,
'confirmButtonColor' => '#3085d6',
'cancelButtonColor' => '#d33',
'confirmButtonText' => 'Yes, delete it!',
'cancelButtonText' => 'No, cancel!',
'confirmButtonClass' => 'btn btn-success',
'cancelButtonClass' => 'btn btn-danger',
'buttonsStyling' => false,
],
'callback' => new \yii\web\JsExpression("
function (result) {
if(result.value) {
Swal.fire('Deleted!','Your file has been deleted.','success')
}
if (result.dismiss === 'cancel') {
Swal.fire(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
}
"),
]) ?>
输入类型示例
文本
<?= SweetAlert2::widget([
'options' => [
'title' => 'Input something',
'input' => 'text',
'showCancelButton' => true,
'inputValidator' => new \yii\web\JsExpression("
function (value) {
return new Promise(function (resolve) {
if (value) {
resolve()
} else {
resolve('You need to write something!')
}
})
}
")
],
'callback' => new \yii\web\JsExpression("
function (result) {
if(result.value) {
Swal.fire({
type: 'success',
html: 'You entered: ' + result.value
})
}
}
"),
]) ?>
电子邮件
<?= SweetAlert2::widget([
'options' => [
'title' => 'Input email address',
'input' => 'email',
],
'callback' => new \yii\web\JsExpression("
function (result) {
Swal.fire({
type: 'success',
html: 'Entered email: ' + result.value
})
}
"),
]) ?>
密码
<?= SweetAlert2::widget([
'options' => [
'title' => 'Enter your password',
'input' => 'password',
'inputAttributes' => [
'maxlength' => 10,
'autocapitalize' => 'off',
'autocorrect' => 'off',
]
],
'callback' => new \yii\web\JsExpression("
function (result) {
if (result.value) {
Swal.fire({
type: 'success',
html: 'Entered password: ' + result.value
})
}
}
"),
]) ?>
文本区域
<?= SweetAlert2::widget([
'options' => [
'input' => 'textarea',
'showCancelButton' => true,
],
'callback' => new \yii\web\JsExpression("
function (result) {
if (result.value) {
Swal.fire(result.value)
}
}
"),
]) ?>
选择
<?= SweetAlert2::widget([
'options' => [
'title' => 'Select Country',
'input' => 'select',
'inputOptions' => [
'CHN' => 'China',
'RUS' => 'Russia',
'USA' => 'America',
],
'inputPlaceholder' => 'Select country',
'showCancelButton' => true,
'inputValidator' => new \yii\web\JsExpression("
function (value) {
return new Promise(function (resolve) {
if (value === 'CHN') {
resolve()
} else {
resolve('You need to select CHN :)')
}
})
}
")
],
'callback' => new \yii\web\JsExpression("
function (result) {
if (result.value) {
Swal.fire({
type: 'success',
html: 'You selected: ' + result.value
})
}
}
"),
]) ?>
单选按钮
<?php
$script = new \yii\web\JsExpression("
// inputOptions can be an object or Promise
var inputOptions = new Promise(function (resolve) {
setTimeout(function () {
resolve({
'#ff0000': 'Red',
'#00ff00': 'Green',
'#0000ff': 'Blue'
})
}, 2000)
})
");
$this->registerJs($script, \yii\web\View::POS_HEAD);
echo SweetAlert2::widget([
'options' => [
'title' => 'Select color',
'input' => 'radio',
'inputOptions' => new \yii\web\JsExpression("inputOptions"),
'inputValidator' => new \yii\web\JsExpression("
function (result) {
return new Promise(function (resolve) {
if (result) {
resolve()
} else {
resolve('You need to select something!')
}
})
}
")
],
'callback' => new \yii\web\JsExpression("
function (result) {
Swal.fire({
type: 'success',
html: 'You selected: ' + result.value
})
}
"),
]); ?>
复选框
<?= SweetAlert2::widget([
'options' => [
'title' => 'Terms and conditions',
'input' => 'checkbox',
'inputValue' => 1,
'inputPlaceholder' => 'I agree with the terms and conditions',
'confirmButtonText' => 'Continue <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>',
'inputValidator' => new \yii\web\JsExpression("
function (result) {
return new Promise(function (resolve) {
if (result) {
resolve()
} else {
resolve('You need to agree with T&C')
}
})
}
")
],
'callback' => new \yii\web\JsExpression("
function (result) {
Swal.fire({
type: 'success',
html: 'You agreed with T&C :' + result.value
})
}
"),
]) ?>
文件
<?= SweetAlert2::widget([
'options' => [
'title' => 'Select image',
'input' => 'file',
'inputAttributes' => [
'accept' => 'image/*',
'aria-label' => 'Upload your profile picture',
],
],
'callback' => new \yii\web\JsExpression("
function(result) {
var reader = new FileReader
reader.onload = function (e) {
Swal.fire({
title: 'Your uploaded picture',
imageUrl: e.target.result,
imageAlt: 'The uploaded picture'
})
}
reader.readAsDataURL(result.value)
}
"),
]) ?>
范围
<?= SweetAlert2::widget([
'options' => [
'title' => 'How old are you?',
'icon' => 'question',
'input' => 'range',
'inputAttributes' => [
'min' => 8,
'max' => 120,
'step' => 1,
],
'inputValue' => 25,
]
]) ?>
不支持多输入，您可以通过使用 html 和 preConfirm 参数来实现。在 preConfirm() 函数中，您可以将自定义结果作为参数传递给 resolve() 函数。
<?= SweetAlert2::widget([
'options' => [
'title' => 'Multiple inputs',
'html' => '<input id="swal-input1" class="swal2-input"> <input id="swal-input2" class="swal2-input">',
'preConfirm' => new \yii\web\JsExpression("
function () {
return new Promise(function (resolve) {
resolve([
$('#swal-input1').val(),
$('#swal-input2').val()
])
})
}
"),
'onOpen' => new \yii\web\JsExpression("
function () {
$('#swal-input1').focus()
}
"),
],
'callback' => new \yii\web\JsExpression("
function (result) {
Swal.fire(JSON.stringify(result.value))
}
"),
]) ?>
Ajax 请求示例
<?= SweetAlert2::widget([
'options' => [
'title' => 'Submit email to run ajax request',
'input' => 'email',
'showCancelButton' => true,
'confirmButtonText' => 'Submit',
'showLoaderOnConfirm' => true,
'preConfirm' => new \yii\web\JsExpression("
function (email) {
return new Promise(function (resolve) {
setTimeout(function () {
if (email === 'taken@example.com') {
swal.showValidationError(
'This email is already taken.'
)
}
resolve()
}, 2000)
})
}
"),
'allowOutsideClick' => false,
],
'callback' => new \yii\web\JsExpression("
function (result) {
if (result.value) {
Swal.fire({
type: 'success',
title: 'Ajax request finished!',
html: 'Submitted email: ' + result.value
})
}
}
"),
]) ?>
更多信息
请参阅 SweetAlert2
许可
MIT 许可证 (MIT)。有关更多信息，请参阅 许可文件。