前端问题

某个页面有多个请求错误时，如何通过notification依次弹出message，弹窗停留时间10s。

第一种方式：没有使用

let notifications = [];

 popNotification() {
  const notification = this.$notify({
    title: 'Notification',
    message 'This is a notification message.',
    duration: 10000
  });
  notifications.push(notification);
}

function showNotifications() {
  let i = 0;
  const intervalId = setInterval(() => {
    if (i >= notifications.length) {
      clearInterval(intervalId); // 如果所有弹窗都显示完了，清除定时器
      return;
    }
    notifications[i].show(); // 显示当前弹窗
    i++;
    setTimeout(() => {
      notifications[i - 1].close(); // 10秒后关闭当前弹窗
    }, 10000);
  }, 10000);
}

for (let i = 0; i < 3; i++) {
  popNotification.call(this); // 假设需要显示3个弹窗
}

showNotifications.call(this); // 弹出所有弹窗

第二种方式:有点问题

 // 遍历数组
       for (let i = 0; i < msgList.length; i++) {
        //     // 执行操作
            const newMessage = msgList[i].replaceAll('|', '<br />');
           Notification({
              title: '暂无权限1',
              dangerouslyUseHTMLString: true,
             message: '您没有当前操作的访问权限，请联系管理员授权。[<br />' + newMessage + ']',
              customClass: 'auth-notification',
              duration: 10000,
               type: 'error',
          onClose: () => {
              // 在onClose回调函数中，弹出下一条消息
                   if (i < msgList.length - 1) {
                      const nextNewMessage = msgList[i].replaceAll('|', '<br />');
                       Notification({
                            title: '暂无权限',
                          dangerouslyUseHTMLString: true,
                          message: '您没有当前操作的访问权限，请联系管理员授权。[<br />' + nextNewMessage + ']',
                        customClass: 'auth-notification',
                           duration: 10000,
                           type: 'error',
                          onClose: function () {
                             i++;
                           },
                     });
                  }
               },
             });
         }

第三种方式：

const data = [info1, info2, info3]; // 假设 3 个接口返回的信息
let idx = 0; // 定义使用的数组索引
const showNotification = () => {
  const info = data[idx++]; // 取出当前的数组元素，并将指针指向下一个元素
  // element-ui 弹出通
  const notificationInstance = notification.show(info);
  notificationInstance.$on("close", () => {
    // 监听 close 事件，在关闭通时弹出下一个通知
    if (idx < data.length) {
 showNotification(); // 弹出下一个通
    }
  });
};
showNotification(); // 弹出第一个通知

【需求2】某个页面有多个请求错误时，如何通过notification依次弹出message，弹窗停留时间10s。

前端问题