如何在完成成就时在任意界面弹出提示对话框？

核心思路是解耦成就解锁的触发逻辑与弹窗展示逻辑，让弹窗组件独立于具体页面存在，以下是几种实用方案：

1. 全局事件总线（Event Bus） #

创建一个全局事件中心，在成就解锁的逻辑处触发事件，同时让全局挂载的弹窗组件监听该事件，这样无论当前处于哪个界面，事件触发时都会弹出提示。

代码示例： #

创建事件总线：

// event-bus.js
class EventBus {
  constructor() {
    this.events = {};
  }
  on(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  }
  emit(event, data) {
    this.events[event]?.forEach(callback => callback(data));
  }
}
export default new EventBus();

全局弹窗组件监听事件：

// AchievementToast.vue
import EventBus from './event-bus.js';
export default {
  data() {
    return {
      dialogVisible: false,
      currentAchievement: null
    };
  },
  mounted() {
    EventBus.on('achievement-unlocked', (achievement) => {
      this.currentAchievement = achievement;
      this.dialogVisible = true;
    });
  }
}

在任意触发成就解锁的地方发送事件：

// 比如任务完成逻辑中
import EventBus from './event-bus.js';
function finishDailyTask() {
  // 任务完成处理...
  const newAchievement = { name: '日常达人', desc: '完成10次日常任务' };
  EventBus.emit('achievement-unlocked', newAchievement);
}

2. 全局状态管理 #

利用状态管理库（如Vue的Pinia/Vuex、React的Redux）维护成就解锁状态，让全局弹窗组件监听状态变化，一旦有新成就解锁就自动弹出提示。

代码示例（以Pinia为例）： #

定义成就状态仓库：

// stores/achievement.js
import { defineStore } from 'pinia';
export const useAchievementStore = defineStore('achievement', {
  state: () => ({
    latestUnlocked: null
  }),
  actions: {
    unlock(achievement) {
      this.latestUnlocked = achievement;
      // 延时重置状态，避免重复触发弹窗
      setTimeout(() => this.latestUnlocked = null, 3000);
    }
  }
});

全局弹窗组件监听状态：

// AchievementToast.vue
import { useAchievementStore } from './stores/achievement.js';
import { watch, ref } from 'vue';
export default {
  setup() {
    const achievementStore = useAchievementStore();
    const dialogVisible = ref(false);
    const currentAchievement = ref(null);

    watch(() => achievementStore.latestUnlocked, (achievement) => {
      if (achievement) {
        currentAchievement.value = achievement;
        dialogVisible.value = true;
      }
    });

    return { dialogVisible, currentAchievement };
  }
}

在任意位置触发成就解锁：

import { useAchievementStore } from './stores/achievement.js';
function exploreAllAreas() {
  const achievementStore = useAchievementStore();
  achievementStore.unlock({ name: '全图探索者', desc: '访问所有地图区域' });
}

3. 全局挂载弹窗组件 #

将成就弹窗组件直接挂载到应用根节点（如document.body），使其成为全局独立组件，然后暴露一个全局调用方法，在任意地方调用该方法即可弹出提示。

代码示例（Vue）： #

封装全局弹窗方法：

// achievement-toast.js
import Vue from 'vue';
import AchievementToast from './AchievementToast.vue';

const ToastInstance = new Vue(AchievementToast).$mount(document.createElement('div'));
document.body.appendChild(ToastInstance.$el);

export default function showAchievementToast(achievement) {
  ToastInstance.show(achievement);
}

弹窗组件实现：

// AchievementToast.vue
export default {
  data() {
    return {
      dialogVisible: false,
      achievement: null
    };
  },
  methods: {
    show(data) {
      this.achievement = data;
      this.dialogVisible = true;
    }
  }
}

在任意位置调用：

import showAchievementToast from './achievement-toast.js';
function completeFirstLogin() {
  showAchievementToast({ name: '新手报到', desc: '完成首次登录' });
}

以上方案的核心都是让弹窗组件脱离页面层级限制，通过事件、状态或全局方法来触发，无需在每个界面单独调用弹窗代码。

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