前端进入页面中间弹窗(前端弹窗怎么写)

在后端服务调用等待时，为防止前端误操作，一般会在前端实现一个等待弹窗，今天简单实现了一个，效果如下图：

作用嘛，一个是遮罩前端页面，二是提供信息提示，告知用户正在做什么操作，用了多长时间等等。

实现方式如下：

弹窗事件跟踪器

实现一个hander，用以跟踪和监控弹窗事件ON-PENDING，这个Handler需要在main.js中注册并和EventBus关联，代码如下图所示，

pendingHandler.eventBus=Vue.prototype.$EventBus;

Vue.prototype.$pendingHandler=pendingHandler;

let main=new Vue({

router,

store,

render: h => h(App)

}).$mount(‘#app’)

main.$pendingHandler.startMonitor();

弹窗组件

用全局弹窗（可以参考之前我写的全局弹窗实现）封装一个弹窗组件，弹窗中实现一个计时器和一些必要的操作信息，这里我还引入了一个AntD的spin，大家可以视实际需要加入自己想要的信息。

注意，这里这个组件要跟踪OFF-PENDING实践，用以关闭弹窗，代码如下：

mounted(){

this.$EventBus.$on(‘OFF-PENDING’,this.onClosePendingDialog);

this.start();

this.$emit(‘onUnenableActions’);

},

beforeDestroy(){

this.$EventBus.$off(‘OFF-PENDING’)

}

现场调用

在需要调用API时，可以进行弹窗的调用，并在回调完成时关闭弹窗。代码如下图所示：

功能反思

到这里为止，功能实现完毕了，但感觉还是有改进的空间，如在Axios的拦截器上做通用的显示和终止弹窗等等。我个人水平有限，有很多地方考虑不周，大家如果有好的方案可以多多交流。