Question

我正在尝试使用sweetalert，并且想在标题下方插入HTML。

在我的最小可行示例下面查找：

let shareIt = `<div><input id="myInput" class="swal-content__input" placeholder="" value="This is some text"/></div>`

swal({
  title: "Good job!",
  content: `${shareIt}`,
  icon: "success"
})

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

有人建议如何通过shareIt变量显示HTML吗？

Answer 1

您可以使用SweetAlert2，如下所示：

它类似于Sweet Alert JavaScript。

swal({
  title: "<i>Title</i>", 
  html: "Testno  sporocilo za objekt: <b>test</b>",  
  confirmButtonText: "V <u>redu</u>", 
});

<script src="https://cdn.jsdelivr.net/npm/sweetalert2"></script>

如果要使用文本框或AJAX，可以使用以下脚本：

swal({
  title: 'Submit your Github username',
  input: 'text',
  inputAttributes: {
    autocapitalize: 'off'
  },
  showCancelButton: true,
  confirmButtonText: 'Look up',
  showLoaderOnConfirm: true,
  preConfirm: (login) => {
    return fetch(`//api.github.com/users/${login}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(response.statusText)
        }
        return response.json()
      })
      .catch(error => {
        swal.showValidationError(
          `Request failed: ${error}`
        )
      })
  },
  allowOutsideClick: () => !swal.isLoading()
}).then((result) => {
  if (result.value) {
    swal({
      title: `${result.value.login}'s avatar`,
      imageUrl: result.value.avatar_url
    })
  }
})

<script src="https://unpkg.com/sweetalert2@7.17.0/dist/sweetalert2.all.js"></script>

Answer 2

对于自定义content，您需要传递DOM node。

发件人：https://sweetalert.js.org/guides/#using-dom-nodes-as-content

这乍看起来可能很复杂，但是实际上很简单。我们要做的就是创建一个输入标签作为React组件。 然后我们提取其DOM节点并将其传递到swal函数的content选项下，以将其呈现为未样式化的元素。

（强调我的）

由于我们需要将模板文字转换为DOM节点，因此我们可以使用document.createElement('template')，然后将innerHTML分配给您的文字。这样一来，我们便可以调用document.importNode（返回文档片段），可以查询该元素并将其传递给swal。

注意：如何选择根据模板文字来创建DOM节点由您决定（例如，您可能会喜欢直接调用document.createDocumentFragment或创建{{1} }元素并以这种方式分配innerHTML ...）

片段示例：

div

let template = document.createElement('template');

template.innerHTML = `<div><input id="myInput" class="swal-content__input" placeholder="" value="This is some text"/></div>`;

let shareIt = document.importNode(template.content, true).querySelector('div');

swal({
  title: "Good job!",
  content: shareIt,
  icon: "success"
})

在元素中显示HTML

2 个答案: