vue element-ui messageBox

使用场景

在工作中开发的时候，前端使用到饿了么ui框架，对接口请求做了封装，http 状态码为401或者403权限过期或者无权限的情况下弹出提醒( messageBox.confirm() )，并在点击确认后返回登录页重新登录。但是在一个页面有可能存在多个接口同时调用的情况，因此也会导致多次弹窗提醒，因此对messageBox进行二次封装，防止重复弹窗在人机交互体验上就显得尤为重要。

封装

msgBox封装及实例导出

class MsgBox {constructor() {this.isLoging = false}/*** 弹窗* @param {Object} param messageBox的参数*/dialog(param) {if (!this.isLoging) {this.isLoging = trueconst _this = thisMessageBox({title: param.title,type: param.type,message: param.message,confirmButtonText: param.confirmButtonText,// 等等别的参数...callback () {param.callback()_this.isLoging = false // 点击确认关闭弹窗后 重置}})}}
}export const msgBox = new MsgBox()

引入及使用

import { msgBox } from '@/js/reWrite'// 业务代码...
case 401:msgBox.dialog({type: 'warning',title: '系统提示',message: '登录状态已过期，请重新登录',confirmButtonText: '我知道了',callback() {// 处理各种登出逻辑location.href = '/'}})break
default:break

前端饿了么UI messageBox二次封装，防止重复弹窗相关推荐

(vue+【饿了么UI】tag组件封装)
(vue+[饿了么UI]tag组件封装) 根据项目所衍生的一种tag组件,废话不多说直接上代码 <template> <div><d ...
饿了么UI框架element的表格多个弹窗问题
<el-table-column label="操作"><template scope="scope"><el-button si ...
好用的视频播放sdk ijkplayer 二次封装的ijkplay
本文章为博主在借鉴了一名前辈的文章后为了自己以后能够快速的回忆所写小计如有看不懂的地方还请谅解,毕竟只是为了自己更好的回忆如有何不懂或者异常出现请浏览原文章,原文章中对于异常都有一一解答. 在此 ...
NodeJS环境搭建以及运行Node.js项目、饿了么ui（elementui）开发模式简单介绍
一.Node.js是什么? 1.1 Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]. Node.js使用了一个事件驱动.非阻塞式I/O 的模型. 1.2 Node.j ...
vue 饿了么ui 日期选择器修改样式
<div class="block"><el-date-pickerv-model="selectStartTime"type="d ...
【前端工程化】深入浅出vite（二）--vue3全家桶+ts构建后管系统
安装基础包 npm create vite@latest # 这里选择的是Vue+Typescript的组合 cd vue-admin npm install# 先安装基础包 npm install ...
UGUI的优点新UI系统二直观、易于使用
UGUI的优点新UI系统二直观.易于使用对于UI控件,开发者可以直接使用鼠标在Scene视图里编辑它们的大小.位置和旋转角度,而无需编写任何代码,以Button为例,如图1-3.图1-4和图1-5 ...
前端总结·基础篇·CSS（二）视觉
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...

前端饿了么UI messageBox二次封装，防止重复弹窗

vue element-ui messageBox

使用场景

封装

前端饿了么UI messageBox二次封装，防止重复弹窗相关推荐

最新文章

热门文章