Vue3 - Element Plus 消息提示Message组件防止多次弹出问题

Vue3 中的 Element Plus 的 Message 组件有时可能会遇到多次弹出的问题，这通常是由于在未处理好关闭事件或者未正确管理组件状态的情况下发生的。为了避免这种情况，你可以采取以下策略：

1. **阻止默认行为**：在点击确认按钮或者通过 `action` 属性关闭消息时，设置 `@on-click="handleClose(false)"` 并传递一个布尔值标识是否需要阻止默认关闭行为。

<el-message :show.sync="messageVisible" @close="handleClose">
  <template #default>
    <!-- your message content -->
  </template>
  <div slot="footer">
    <el-button type="primary" @click="handleClose(true)">确定</el-button>
  </div>
</el-message>

<script>
export default {
  data() {
    return {
      messageVisible: false,
    };
  },
  methods: {
    handleClose(shouldPrevent) {
      if (!shouldPrevent) {
        this.messageVisible = false; // 关闭消息
      }
    },
  },
};
</script>

2. **使用生命周期钩子**：在 `beforeDestroy` 或者 `deactivated` 生命周期阶段，清除正在显示的消息，确保只有一条消息在界面上。

export default {
  beforeDestroy() {
    this.messageVisible = false;
  },
  // 或者
  deactivated() {
    this.$nextTick(() => {
      this.messageVisible = false;
    });
  },
};

3. **状态管理**：如果你的应用采用了 Vuex 等状态管理工具，可以在 store 中控制消息的状态，确保全局统一管理和关闭。