如何在Google Workspace插件中为SweetAlert2添加加载弹窗

核心实现逻辑不需要改动你已有的成功/错误弹窗函数、后端deleteRows业务代码，只需要调整前端按钮触发函数，在发起后端请求前弹出加载弹窗，请求返回后关闭加载弹窗再唤起对应结果提示即可。

具体修改步骤 #

• 保留你原有写好的swalsuccess、swalerror两个结果弹窗函数，不需要做任何调整
• 重写morphf354触发函数，在调用google.script.run前先唤起加载态弹窗，在成功/失败回调中先关闭加载弹窗，再执行原有结果弹窗逻辑，可选增加按钮防重复点击逻辑

修改后完整代码 #

<button class="button-68" role="button" onclick="morphf354()">Eliminar filas (Max.k)</button>

<script>
// 原有成功弹窗 无需修改
function swalsuccess() {
  Swal.fire({
    title: '¡Hecho!',
    text: 'El script se ha ejecutado 👍',
    icon: 'success',
    confirmButtonText: 'Continuar'
  })
}

// 原有错误弹窗 无需修改
function swalerror() {
  Swal.fire({
    title: 'Error!',
    text: 'El script no ha podido ejecutarse.',
    icon: 'error',
    confirmButtonText: 'Entendido'
  })
}

// 修改后的触发函数
function morphf354() {
  const actionBtn = document.querySelector('.button-68');
  // 弹出加载中弹窗
  Swal.fire({
    title: 'Procesando...',
    text: 'Por favor espera, la operación está en curso',
    allowOutsideClick: false,
    allowEscapeKey: false,
    showConfirmButton: false,
    didOpen: () => {
      Swal.showLoading();
      // 禁用按钮防止重复点击
      actionBtn.disabled = true;
    }
  });

  google.script.run
    .withSuccessHandler((returnValue) => {
      // 关闭加载弹窗
      Swal.close();
      // 恢复按钮状态
      actionBtn.disabled = false;
      // 唤起成功提示
      swalsuccess();
    })
    .withFailureHandler((error) => {
      // 关闭加载弹窗
      Swal.close();
      // 恢复按钮状态
      actionBtn.disabled = false;
      // 唤起错误提示
      swalerror();
    })
    .deleteRows();
}
</script>

配置说明 #

• 加载弹窗配置中allowOutsideClick: false、allowEscapeKey: false用于禁止用户通过点击遮罩、按ESC键关闭加载弹窗，避免流程错乱
• Swal.showLoading()会触发SweetAlert2内置的加载旋转动画，不需要额外引入加载图标资源
• 按钮禁用逻辑可避免用户等待期间反复点击按钮，重复触发删除行的操作，如果你页面有多个同类操作按钮，可通过事件对象传入当前点击的按钮元素，不需要硬编码选择器

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