sweetalert2是一个广受欢迎的javascript库，用于创建美观且响应式的弹出提示框。在实际应用中，开发者经常需要根据具体业务场景定制弹出框的各项元素，其中就包括确认按钮的文本。默认情况下，sweetalert2的确认按钮文本为“ok”，但在许多情况下，我们需要将其更改为更具描述性的内容，例如“确定”、“同意”、“继续”等，甚至添加图标。
早期的SweetAlert版本可能使用swal()函数，其配置方式略有不同。然而，对于当前主流的SweetAlert2，我们主要使用Swal.fire()方法来触发弹出框，因此，理解其正确的配置方式至关重要。
SweetAlert2 Swal.fire() 确认按钮文本自定义
在使用Swal.fire()方法时，所有配置选项都作为参数对象传递。要自定义确认按钮的文本，我们只需在配置对象中设置confirmButtonText属性。这个属性的值可以是纯文本字符串，也可以是包含HTML标签的字符串，这为按钮的样式和内容提供了极大的灵活性。
核心配置选项：confirmButtonText
confirmButtonText属性用于指定确认按钮上显示的文本。例如，如果您想将按钮文本更改为“Yes, I am sure!”，您可以在Swal.fire()的配置对象中添加confirmButtonText: 'Yes, I am sure!'。
此外，为了提升用户体验和可访问性，SweetAlert2还提供了confirmButtonAriaLabel选项。当按钮文本包含图标或不够明确时，此属性可以为屏幕阅读器提供更详细的描述。
示例代码与解析
以下是一个完整的示例，展示了如何使用Swal.fire()方法自定义确认按钮文本，并结合其他常用选项来创建一个功能丰富的弹出框：
Swal.fire({
title: 'HTML 示例', // 弹出框标题，支持HTML
icon: 'info', // 弹出框图标类型，如 'info', 'warning', 'error', 'success', 'question'
html:
'您可以使用 粗体文本, ' +
'链接 ' +
'以及其他HTML标签', // 弹出框内容，支持HTML
showCloseButton: true, // 显示关闭按钮
showCancelButton: true, // 显示取消按钮
focusConfirm: false, // 默认不聚焦确认按钮
confirmButtonText:
' 太棒了!', // 自定义确认按钮文本，支持HTML和Font Awesome图标
confirmButtonAriaLabel: '竖起大拇指，太棒了!', // 确认按钮的ARIA标签，用于可访问性
cancelButtonText:
'', // 自定义取消按钮文本，支持HTML和Font Awesome图标
cancelButtonAriaLabel: '竖起大拇指朝下' // 取消按钮的ARIA标签
});代码解析：
- title 和 html: 这两个属性都支持HTML内容，允许您在标题和主体内容中嵌入富文本和链接。
- icon: 设置弹出框左侧的图标，提供视觉提示。
- showCloseButton: 设置为true会在弹出框右上角显示一个关闭按钮。
- showCancelButton: 设置为true会显示一个取消按钮，与确认按钮并列。
- focusConfirm: 默认为true，表示弹出框出现时自动聚焦确认按钮。在此示例中设置为false，表示不自动聚焦。
- confirmButtonText: 这是核心所在。它被设置为一个包含标签的字符串，利用Font Awesome图标库显示一个点赞图标，并附带“太棒了!”的文本。这充分展示了其支持HTML的能力。
- confirmButtonAriaLabel: 为确认按钮提供一个语义化的描述，对使用辅助技术的用户非常有益。
- cancelButtonText 和 cancelButtonAriaLabel: 与确认按钮类似，用于自定义取消按钮的文本和可访问性标签。
注意事项与最佳实践
- 版本兼容性： 确保您使用的SweetAlert2版本支持Swal.fire()方法和相应的配置选项。本教程基于SweetAlert2的现代用法。
- HTML内容： 当confirmButtonText包含HTML时，请确保HTML结构有效且安全，避免XSS攻击。
- 可访问性： 始终考虑为自定义按钮文本提供AriaLabel，以确保所有用户都能理解按钮的功能。
- 图标库： 如果您在按钮文本中使用图标（如示例中的Font Awesome），请确保已正确引入相应的CSS或JS库。
- 官方文档： SweetAlert2的官方GitHub页面（https://www.php.cn/link/342312606e8c4777d1db65ec26526022）是获取最新信息和最全面配置选项的最佳资源。遇到任何疑问时，查阅官方文档是解决问题的最有效途径。
通过以上方法，您可以灵活地自定义SweetAlert2弹出框的确认按钮文本，使其更好地融入您的应用界面，并提升用户交互体验。
