uni-app 保存时频繁弹出提示框无法关闭

在开发uni-app应用时，如果遇到保存操作时频繁弹出提示框且无法关闭的问题，通常可能是由于逻辑处理不当或事件绑定错误导致的。以下是一个可能的解决方案示例，通过代码来优化保存逻辑，避免重复弹出提示框。

首先，我们需要确保在保存操作进行期间，用户不能再次触发保存，这可以通过设置一个标志位来实现。

示例代码

<template>
  <view>
    <button :disabled="isSaving" @click="handleSave">保存</button>
    <view v-if="saveMessage" class="message">{{ saveMessage }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isSaving: false, // 保存操作标志位
      saveMessage: ''  // 保存操作提示信息
    };
  },
  methods: {
    async handleSave() {
      if (this.isSaving) return; // 如果正在保存，则直接返回

      this.isSaving = true; // 设置保存标志位为true，禁用保存按钮
      this.saveMessage = ''; // 清空之前的提示信息

      try {
        // 模拟保存操作，这里可以是网络请求等异步操作
        await this.simulateSave();
        this.saveMessage = '保存成功';
      } catch (error) {
        this.saveMessage = '保存失败：' + error.message;
      } finally {
        this.isSaving = false; // 恢复保存标志位为false，启用保存按钮
      }
    },
    simulateSave() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 模拟成功或失败的情况
          const success = Math.random() > 0.5;
          if (success) {
            resolve();
          } else {
            reject(new Error('模拟保存失败'));
          }
        }, 2000); // 模拟2秒的异步操作
      });
    }
  }
};
</script>

<style>
.message {
  color: red;
  margin-top: 10px;
}
</style>

解释

1. 数据绑定：通过isSaving标志位控制保存按钮的禁用状态，防止用户在保存过程中再次点击。
2. 事件处理：在handleSave方法中，首先检查isSaving标志位，如果为true则直接返回，避免重复触发保存逻辑。
3. 异步操作：使用async/await处理异步保存操作，并在finally块中恢复isSaving标志位，确保无论成功或失败都能启用保存按钮。
4. 提示信息：通过saveMessage显示保存操作的结果，便于用户了解保存状态。

通过这种方式，可以有效避免在保存操作时频繁弹出提示框且无法关闭的问题。