如何在 SweetAlert2 中自定义弹窗确认按钮文本

SweetAlert2 是一个美观、响应迅速且高度可定制的 JavaScript 弹窗库，广泛应用于网页交互中。在使用 Swal.fire() 方法显示弹窗时，默认的确认按钮文本通常为“Ok”。然而，在许多应用场景中，我们可能需要将其更改为更具描述性或符合业务逻辑的文本，例如“确定”、“好的”、“继续”甚至是带有图标的富文本。

理解 SweetAlert2 确认按钮文本自定义

早期的 SweetAlert 版本（例如 SweetAlert 1.x）可能使用 swal() 函数来配置弹窗，其配置选项与当前 SweetAlert2 的 Swal.fire() 方法有所不同。对于 SweetAlert2 用户，正确的配置方式是直接在 Swal.fire() 方法的参数对象中设置相关选项。

要更改确认按钮的文本，核心在于利用 Swal.fire() 方法提供的 confirmButtonText 选项。这个选项允许我们指定确认按钮上显示的具体文本内容。

核心配置：confirmButtonText 选项

confirmButtonText 选项接受一个字符串作为值，该字符串可以是纯文本，也可以是包含 HTML 标签的富文本。这为按钮文本的样式和内容提供了极大的灵活性。

基本用法：

只需将 confirmButtonText 属性添加到 Swal.fire() 的配置对象中，并为其赋值所需的文本。

Swal.fire({
  title: '操作确认',
  text: '您确定要执行此操作吗？',
  icon: 'warning',
  confirmButtonText: '是的，我确定！' // 自定义确认按钮文本
});

高级用法：包含 HTML 内容和图标

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

confirmButtonText 不仅支持纯文本，还可以接受 HTML 字符串。这意味着您可以嵌入 <i class="fa fa-..."></i> 等图标标签，或者使用 <b>、<a> 等标签来丰富按钮的视觉效果。

Swal.fire({
  title: '<strong>HTML <u>示例</u></strong>',
  icon: 'info',
  html:
    '您可以使用 <b>粗体文本</b>, ' +
    '<a href="https://sweetalert2.github.io">链接</a> ' +
    '以及其他 HTML 标签',
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
  confirmButtonText:
    '<i class="fa fa-thumbs-up"></i> 太棒了!', // 带有 Font Awesome 图标的 HTML 文本
  confirmButtonAriaLabel: '点赞，太棒了!', // 辅助功能文本
  cancelButtonText:
    '<i class="fa fa-thumbs-down"></i>', // 带有 Font Awesome 图标的取消按钮文本
  cancelButtonAriaLabel: '点踩' // 辅助功能文本
});

请注意，如果使用 Font Awesome 等图标库，您需要确保已在项目中正确引入了相应的 CSS 文件。

示例代码

以下是一个结合了用户场景和解决方案的完整示例。假设我们有一个页面加载时弹出的消息，并且希望自定义其确认按钮文本。

$(document).ready(function(){
    let popup_shown = false;
    let cookies = document.cookie.split('; ');

    // 检查是否存在名为 'zxczxc' 的 cookie，以判断弹窗是否已显示过
    for( let i=0; i<cookies.length; i++ ){
        let cookie = cookies[i].split('=');
        if( cookie[0].trim() == 'zxczxc' ) { // 使用 trim() 避免空格问题
            popup_shown = true;
            break; // 找到即退出循环
        }
    }

    // 如果弹窗未显示过，则显示弹窗
    if( !popup_shown ){
        // 假设 popup_data 变量包含需要显示在弹窗中的 HTML 内容
        // 在实际应用中，这可能是一个从后端传递过来的动态内容，例如 Laravel 的 {!! $output !!}
        var popup_data = '这是您的重要通知内容。请仔细阅读。'; // 示例数据

        Swal.fire({
            html: popup_data,
            title: '温馨提示', // 可以添加标题
            icon: 'info', // 可以添加图标
            confirmButtonText: '知道了，谢谢！' // 自定义确认按钮文本
        });

        // 设置 cookie，标记弹窗已显示
        document.cookie = "zxczxc=1; path=/";
    }
});

在这个示例中，当页面加载且 zxczxc cookie 不存在时，SweetAlert2 弹窗会显示，并且其确认按钮将显示为“知道了，谢谢！”而不是默认的“Ok”。

注意事项与最佳实践

1. 版本兼容性： 确保您使用的 SweetAlert2 版本支持 Swal.fire() 及其提供的所有选项。本文内容基于 SweetAlert2 的现代 API。
2. 可访问性 (Aria Label)： 当使用图标或非标准文本作为按钮内容时，强烈建议同时设置 confirmButtonAriaLabel 和 cancelButtonAriaLabel。这些属性为屏幕阅读器提供了按钮的描述性文本，极大提升了网站的可访问性。
3. 取消按钮： 如果您希望弹窗同时包含确认和取消按钮，需要设置 showCancelButton: true。取消按钮的文本可以通过 cancelButtonText 选项进行自定义。
4. HTML 内容安全性： 如果 confirmButtonText 的内容来源于用户输入或外部数据，请务必进行适当的净化（sanitization），以防止跨站脚本攻击（XSS）。
5. 官方文档： SweetAlert2 的官方 GitHub 页面和文档（https://sweetalert2.github.io/）是获取最新信息和详细使用指南的最佳来源。遇到问题时，查阅官方文档通常能找到最准确的解决方案。

总结

通过简单地在 Swal.fire() 配置对象中设置 confirmButtonText 选项，我们可以轻松地自定义 SweetAlert2 弹窗的确认按钮文本。无论是纯文本、富文本还是带有图标的 HTML 内容，SweetAlert2 都提供了灵活的支持。结合 confirmButtonAriaLabel 等辅助功能选项，可以进一步提升用户体验和网站的可访问性。掌握这一技巧，将使您的弹窗更加符合应用的需求和品牌风格。

以上就是如何在 SweetAlert2 中自定义弹窗确认按钮文本的详细内容，更多请关注php中文网其它相关文章！