Vue3 完美实现弹窗优先级控制，优雅应对各种业务场景

2022-12-11 23:21:00

## 弹窗优先级控制：Vue3 的优雅解决方案

### 前言

在前端开发中，弹窗无处不在，从新人引导到升级提示，再到权益提醒。控制弹窗的弹出时机和优先级至关重要，确保用户在合适的时间看到合适的弹窗。

Vue2.x 中使用多个 ref 来控制优先级存在局限性。Vue3.0 的 computed api 提供了一个更灵活且易于维护的解决方案。

### 封装 computed api

第一步，封装 computed api，实现类似 ref 的用法：

const { popup, setPopup } = usePopup();

其中，popup 存储当前显示的弹窗，setPopup 用于设置弹窗。

### 实现优先级控制

接下来，为每个弹窗设置优先级：

const priority = computed(() => {
  // 根据弹窗类型设置优先级
  if (popup.value === 'newbieGuide') return 1;
  else if (popup.value === 'upgradePopup') return 2;
  else if (popup.value === 'rightsPopup') return 3;
  else return 0;
});

多个弹窗同时满足显示条件时，优先级较高的弹窗优先显示：

if (priority.value === 1) showNewbieGuide();
else if (priority.value === 2) showUpgradePopup();
else if (priority.value === 3) showRightsPopup();

### 示例代码

以下是完整示例代码：

// 封装 computed api
const usePopup = () => {
  const popup = ref(null);
  const setPopup = (value) => { popup.value = value; };
  return { popup, setPopup };
};

// 实现优先级控制
const priority = computed(() => {
  if (popup.value === 'newbieGuide') return 1;
  else if (popup.value === 'upgradePopup') return 2;
  else if (popup.value === 'rightsPopup') return 3;
  else return 0;
});

// 显示弹窗
const showPopup = () => {
  if (priority.value === 1) showNewbieGuide();
  else if (priority.value === 2) showUpgradePopup();
  else if (priority.value === 3) showRightsPopup();
};