ElMessage 如何只显示一次

ElMessage 是 Element UI 提供的一个轻量级的全局消息提示工具，它可以帮助你快速地在前端显示消息通知，通常用于异步操作后的反馈或验证结果。如果你想让 ElMessage 只显示一次，可以采用以下几种策略：

1. **关闭计数器**: 给每个消息添加一个计数器，每显示一次减一，直到计数器为零时隐藏。在 `ElMessage` 的 `onClose` 回调中更新这个计数器。

import { ElMessage } from 'element-plus';

let showCount = 0;

function showMessage(message) {
  showCount++;
  ElMessage({
    message,
    type: 'info',
    onClose: () => {
      if (--showCount === 0) {
        // 当计数器归零时移除消息
        ElMessage.remove();
      }
    }
  });
}

// 使用示例
showMessage('这是一个提示信息');

2. **状态管理**: 在应用的状态管理库（如 Vuex）中保存一个消息是否已显示过的标志。如果消息已经显示过，则不再显示新的消息。

import { ElMessage, mapState } from 'element-plus';
import { reactive } from 'vue';

const state = reactive({ hasShownMessage: false });

function showMessage(message) {
  if (!state.hasShownMessage) {
    ElMessage(message);
    state.hasShownMessage = true;
  }
}

// 使用示例
showMessage('已显示过了');

3. **局部缓存**: 如果消息仅在特定场景下需要显示一次，你可以在该组件的生命周期钩子内检查是否存在缓存，有则忽略。

import { ref } from 'vue';
import ElMessage from 'element-plus';

const messageCache = ref();

function showMessage(message) {
  if (!messageCache.value) {
    ElMessage(message);
    messageCache.value = true; // 或者使用其他方式标记为已显示
  }
}

// 示例
showMessage('这是一次性的');

记住，上述方法都需要在每次显示消息前检查条件，以便控制只显示一次的效果。