element-ui messageBox二次封装,防止重复弹窗

117 阅读1分钟

需求:未登录状态弹窗提醒,重新登入或者拒绝登录,分别跳转登录页或者首页。 参考:blog.csdn.net/qq_23244029…allsobaiduweb~default-2-116024890.142^v94^insert_down1&spm=1018.2226.3001.4187 修改:根据自己的需求进行了修改。

import { msgBox } from '@/utils/msgBox.js'

if (res.code === 401) {
      msgBox.dialog({
        title: '退出',
        type: 'warning',
        message: '您还未登录,您可以取消停留在这个页面或重新登录',
        confirmButtonText: '重新登录',
        cancelButtonText: '取消',
        callback: () => {
          // 跳转登录页的处理逻辑,根据需求更改
          store.dispatch('user/resetToken').then(() => {
            window.location.href = '/login'
          })
        }
      })
    }
import { MessageBox } from 'element-ui'

class MsgBox {
  constructor() {
    this.isLogging = false
    this.msgBoxInstance = null
  }

  dialog(param) {
    if (!this.isLogging) {
      this.isLogging = true
      let that = this
      MessageBox({
        title: param.title,
        type: param.type,
        message: param.message,
        confirmButtonText: param.confirmButtonText,
        cancelButtonText: param.cancelButtonText,
        showCancelButton: true,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        callback: (action) => {
          that.isLogging = false
          if (action === 'confirm') {
            param.callback()
          } else {
            window.location.href = '/'
          }
        }
      })
    }
  }
}

export const msgBox = new MsgBox()