标签: sweetalert2

我有以下代码......用于甜蜜警报文本框

swal({
  title: 'Select an Item',
  input: 'select',
  inputOptions: listOfItemsForSelectBox,
  inputPlaceholder: 'Select country',
  showCancelButton: true,
  inputValidator: function (value) {
    return new Promise(function (resolve, reject) {
      if (value != null) {
        resolve()
      }
    })
  }
}).then(function (result) {
  swal({
    type: 'success',
    html: 'You selected: ' + result
  })
})

出于某种原因，它只是在“您选择的”部分返回“true”...

我想获取项目的 id。

问题

我正在使用SweetAlert2，打开一个带有自定义 HTML 的警报，其中显示了一些输入框。我想使用 SweetAlert2 中的普通确认/取消按钮将这些输入的值发送到套接字。

题

如何使用普通的 SweetAlert2 按钮获取这些输入的值？请不要建议使用普通输入或 HTML 按钮，因为这是一种解决方法，我不希望那样。

环境

我使用 jQuery、SweetAlert2 和一些不相关的库，例如 Vue.js 和 Socket.io 等。

代码

function addUser() {
    swal({
        html: `
            <div class="field">
                Email:
                <p class="control has-icons-left">
                <input class="input" type="email" placeholder="Email">
                    <span class="icon is-small is-left">
                        <i class="mdi mdi-email"></i>
                    </span>
                </p>
            </div>
            <div class="field">
                Name:
                <p class="control has-icons-left">
                    <input class="input" type="text" placeholder="Name">
                    <span class="icon is-small is-left">
                        <i class="mdi mdi-account"></i>
                    </span>
                </p>
            </div>
            <div class="field">
                Password:
                <p class="control has-icons-left">
                    <input class="input" type="text" placeholder="Password">
                    <span …

我想用Sweet Alert2制作一个多输入弹出窗口，这些输入字段之一应该是带有多个选项的选择。我在某些页面中尝试了 select2 multiple，如本例所示：

<select class="js-example-basic-multiple" name="states[]" multiple="multiple">  
    <option value="AL">Alabama</option>
 ...<option value="WY">Wyoming</option> 
</select>

使用插件：

$(document).ready(function() {
   $('.js-example-basic-multiple').select2(); 
});

我尝试在甜蜜警报配置的自定义html描述中插入HTML代码，但没有效果。可以在swal2 中插入 select2吗？谢谢

我最近在我的项目中与 SweetAlert2 合作，我想组合一个“添加注释”功能。

用户单击一个按钮，被定向到一个页面，然后执行以下操作。

    <script>swal({
      title: "Add Note",
      input: "textarea",
      showCancelButton: true,
      confirmButtonColor: "#1FAB45",
      confirmButtonText: "Save",
      cancelButtonText: "Cancel",
      buttonsStyling: true
    }).then(function () {
      swal(
        "Sccess!",
        "Your note has been saved!",
        "success"
      )
    }, function (dismiss) {
      if (dismiss === "cancel") {
        swal(
          "Cancelled",
"Canceled Note",
          "error"
        )
      }
    })</script>

我想要完成的，并且有一个困难的时间是利用 ajax 从输入字段“textarea”发布数据。

我还想通过使用以下内容来验证提交是成功还是失败

'成功'

swal(
        "Sccess!",
        "Your note has been saved!",
        "success"
      )

“失败的”

swal(
          "Internal Error",
          "Oops, your note was not saved."
          "error"
        )

我还需要将一个 PHP 对象传递给 ajax（一个唯一的客户 ID …

我想创建类似于ajax示例的警报,但在确认之前允许外部点击关闭.用户点击确认后,我想禁止外部点击,直到操作完成.

allowOutsideClick像示例中那样将config变量设置为false将永远不允许外部单击,并且我没有在文档中看到以编程方式实现此行为的有效方法.

希望你能帮我解决这个问题，我想我遗漏了一件小事。

我的_layout.cshtml包含所有相关脚本，让甜心在 IE 上工作：

（这在以前的版本中有效，尽管我们有一段时间不必支持 IE）

@if (Request.Browser.Browser == "IE" || Request.Browser.Browser == "InternetExplorer")
{
    <script src="https://npmcdn.com/es6-promise@3.2.1"></script>
}
<script type="text/javascript" src="~/bower_components/sweetalert2/dist/sweetalert2.min.js"></script>

<!--[if IE 9]>
    <script src="~/bower_components/sweetalert2-ie9/dist/sweetalert2.min.js"></script>
<![endif]-->

如您所见，promise 之前包含在内sweetalert2，我知道这很好，因为我的表单上的 sweetalert 函数提交。

问题是，当我单击“是”时，该.then()函数没有被命中，在调试器中它被忽略并直接跳过。这个只和IE有关，目前只在11中测试过，我现在就去看看其他版本。我无法弄清楚为什么会发生这种情况，有什么想法吗？

相关.js：

vm.PostCommentData = function (postData, event) {
    var $commentTextBoxId = '#' + vm.createRemedyCommentId;

    if ($($commentTextBoxId).length) {
        var globalTranslations = globalDashboard.GetTranslations();

        swal({
            title: translations.AreYouSureYouWantToSubmit,
            text: '',
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: '<i class="fas fa-thumbs-up"></i> ' + globalTranslations.Yes,
            cancelButtonText: '<i class="fas fa-thumbs-down"></i> ' + …

我链接到这个 SweetAlert 库https://unpkg.com/sweetalert/dist/sweetalert.min.js，当我在移动设备上显示警报时，它显示得非常小。我增加了文本大小，但成功、错误、警告动画很小。如何调整这些动画的大小，或使警报适合移动设备？

这是没有CSS的

并使用CSS

当用户没有更改甜蜜警报内文本框中的任何值时，我需要禁用确认按钮，并且仅当文本框中的值发生更改时才启用它，但我似乎无法找到解决方法。这是我的代码：

swal({
            title: 'Please Enter Page Name',
            input: 'text',
            inputValue: PageName,
            confirmButtonText: 'Save',
            onOpen: function (){
                swal.disableConfirmButton(); //this disables the button
            }
            preConfirm: function (Name) {
                return new Promise(function (resolve, reject) {
                    resolve();
                })
            },
            allowOutsideClick: false
        })

我曾经使用onOpen过该swal.disableConfirmButton();方法，但我不知道在哪里使用swal.enableConfirmButton();. 有没有类似onInput或类似的功能？如果是，如何使用它来达到预期的结果？

这是我迄今为止取得的成就的代码笔。

https://codepen.io/zeeshanadilbutt/pen/NLvmZz?editors=0010

抱歉，如果我在文档中遗漏了某些内容，但我无法找到阻止在 SweetAlert 2 中关闭对话框的方法，这些将不起作用：

        await Swal.fire({
            html: diagHtml,
            showCancelButton: true,

            willClose: (el) => {
                console.log(el);

                if (someLogic()) {
                    event.preventDefault();
                    return false;
                }
            },
        });

有没有办法让对话框保持不变，最好是使用async？

我定义了一个 className 来自定义 sweetAlert2，但显然该样式不适用于 sweet 警报。我把班级名称称为一切，但似乎没有任何作用。问题可能出在这个包的主 css 文件上吗？

swal.fire({
   title: Welcome,
   className: styleTitle
});

CSS

.styleTitle{
   font-size: 25px;
}