自定义确认界面

htmx支持hx-confirm属性，提供简单的用户操作确认机制。这使用了JavaScript中默认的confirm()函数，虽然可靠，但可能与您的应用程序用户体验不一致。

在本示例中，我们将看到如何使用sweetalert2实现自定义确认对话框。以下是两个示例，一个使用点击+自定义事件方法，另一个使用内置的hx-confirm属性和htmx:confirm事件。

使用点击+自定义事件

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<button hx-get="/confirmed" 
        hx-trigger='confirmed'
        onClick="Swal.fire({title: '确认', text:'您确定要继续吗？'}).then((result)=>{
            if(result.isConfirmed){
              htmx.trigger(this, 'confirmed');  
            } 
        })">
  点击我
</button>

这里我们使用JavaScript在点击时显示Sweet Alert 2确认对话框。如果用户确认对话框，我们通过触发自定义"confirmed"事件来发起请求，该事件随后被hx-trigger捕获。

原生JS，hx-confirm

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
  document.addEventListener("htmx:confirm", function(e) {
    // 事件会在每次请求触发时被触发，所以我们需要检查触发请求的元素
    // 是否通过hx-confirm属性设置了确认问题，
    // 如果没有，我们可以提前返回，让默认行为发生
    if (!e.detail.question) return

    // 这将阻止请求发出，稍后手动发出
    e.preventDefault()

    Swal.fire({
      title: "继续？",
      text: `我问您... ${e.detail.question}`
    }).then(function(result) {
      if (result.isConfirmed) {
        // 如果用户确认，我们手动发出请求
        e.detail.issueRequest(true); // true表示跳过内置的window.confirm()
      }
    })
  })
</script>
  
<button hx-get="/confirmed" hx-confirm="此处为确认文本">
  点击我
</button>

我们添加了一些JavaScript在点击时调用Sweet Alert 2确认对话框。如果用户确认对话框，我们通过调用issueRequest方法触发请求。我们传递skipConfirmation=true作为参数以跳过window.confirm。

这允许在提示中使用hx-confirm的值，当问题依赖于元素时非常方便，例如django列表：

{% for client in clients %}
<button hx-post="/delete/{{client.pk}}" hx-confirm="删除 {{client.name}}？？">删除</button>
{% endfor %}

了解更多关于htmx:confirm事件的信息请点击这里。