Vue.js中如何将SweetAlert提示框的OK按钮移至右上角？

要实现把OK按钮放到弹窗右上角，你需要调整按钮容器的定位——之前的text-right仅能让按钮内文字右对齐，无法改变按钮本身的位置。以下是修改后的完整代码：

修改后的脚本代码 #

Swal.fire({
  title: "test2-e says",
  text: "Be sure to check correctness of all data before generating the report",
  confirmButtonText: "OK",
  position: "top",
  customClass: {
    title: 'text-left', // 标题左对齐
    confirmButton: 'custom-ok-button', // 按钮自定义样式
    popup: 'custom-swal-popup', // 弹窗自定义样式
    actions: 'custom-swal-actions' // 新增按钮容器的自定义类
  },
}).then(result => {
  if (result.isConfirmed) {
    console.log("OK button clicked");
    this.retrieveData();
  }
});

修改后的样式代码 #

.custom-swal-popup {
  top: 0;
  padding: 1.5em 1em 1em; /* 调整弹窗内边距，避免按钮遮挡内容 */
  position: relative; /* 让内部绝对定位的按钮容器以弹窗为基准 */
}

.custom-swal-actions {
  position: absolute; /* 绝对定位按钮容器 */
  top: 0.5em; /* 距离弹窗顶部的距离 */
  right: 0.5em; /* 距离弹窗右侧的距离 */
  margin: 0; /* 清除默认的外边距 */
}

.custom-ok-button {
  background-color: blue;
  padding: 5px 10px;
  border-radius: 3px; /* 可选：调整按钮圆角 */
}

关键说明 #

1. 通过customClass给按钮容器（.swal2-actions）添加自定义类，利用绝对定位将其固定在弹窗右上角
2. 调整弹窗内边距，确保标题和文本不会被按钮遮挡
3. 清除按钮容器的默认外边距，避免多余间距

内容的提问来源于stack exchange，提问作者Darreck Bercasio