如何结合 aurelia-materialize-bridge 和 sweetalert2

debugcn 发表于 Dev

停止

我想在弹出窗口中放置一个表单。
我找到了一个解决方案，但我正在寻找更清洁的东西。

我没有找到用 swal 弹出现有标签的方法。
所以我在我的模板中创建了一个隐藏的表单：

<div id="myHiddenForm"><form role="form">
    <md-input class="email" md-type="email" md-label="Email" md-validate="true" 
        md-validate-error="invalid email">
        <i md-prefix class="material-icons">account_circle</i>
    </md-input>
    <button type="submit" md-button>
        <i class="left material-icons">done</i>Submit
    </button>
</form></div>

然后我用它的innerHTML 创建了弹出窗口。

swal({
  html: document.getElementById('myHiddenForm').innerHTML,
  showConfirmButton: false,
}).catch(swal.noop);

然后我可以将回调附加到提交按钮，这最终有效。

显然，我无法使用，md-value.bind因为显示的表单是原始表单的副本。
我可以访问输入的值，使用document.querySelectorAll('#myHiddenForm .email input')[0].value但我想知道是否有更好的方法来做到这一点？

也许有一个很好的方法来结合 aurelia-materialize-bridge 和 sweetalert2。

我知道有一个模态组件，但它无法将焦点保持在模态弹出窗口内；另外，我已经在这个 web 应用程序的其他地方使用了swal2，因为，你知道，它太棒了。

停止

经过大量测试和完整阅读sweetalert2文档后，我找到了处理此问题的正确方法。我们只需要移动<form>节点。

swal({
  html: '<span></span>'
  , showCloseButton: true
  , showConfirmButton: false
  , onBeforeOpen: dom => swal.getContent()
        .appendChild(document.querySelectorAll('#myHiddenForm form'))
  , onClose: dom => document.getElementById('myHiddenForm')
        .appendChild(swal.getContent().querySelectorAll('form'))
}).catch(swal.noop);

它非常适合与 aurelia 一起使用，因为它保留了所有内容（监视器、事件、验证...）。
我们甚至不需要像我一样手动绑定提交按钮，我们可以使用aurelia通常的方式。

结论：RTFM！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。