如何结合aurelia-materialize-bridge和sweetalert2

时间:2017-11-23 11:03:30

标签: aurelia materialize sweetalert2

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

我找不到用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结合起来。

我知道有一个modal component,但它无法将焦点保持在模态弹出窗口内;此外,我已经在此网络应用中的其他地方使用了swal2,因为您知道它非常好。

0 个答案:

没有答案