如何在Vue项目中添加接口监听时改写遮罩层为长尾？

本文共计2789个文字，预计阅读时间需要12分钟。

一、业务背景+使用屏蔽层来屏蔽用户的异常操作，是前端经常使用的方法。但有些项目中，并未对屏蔽层进行统一管理，这会导致以下问题：

（1）所有业务组件都需要引入屏蔽层，造成代码冗余；（2）屏蔽层样式和功能不一致，影响用户体验；（3）维护困难，一旦屏蔽层出现问题，需要逐个排查业务组件。

一、业务背景

使用遮罩层来屏蔽用户的非正常操作，是前端经常使用的方式。但是在一些项目中，并没有对遮罩层进行统一管理，这就会造成如下的问题：
（1）所有的业务组件都要引入遮罩层组件，也就是每个.vue业务组件，都在template中引入了Mask组件。组件在项目的各个角落都存在，不利于管理，代码极度冗余。
（2）Mask组件都分散到业务的各个角落，所以控制是否显示遮罩层的变量也散在业务组件中。比如使用maskShow来控制是否展示遮罩层时，一个较为复杂的项目中会产生200+的maskShow变量。
（3）maskShow过多且融入在业务中，同时maskShow的变量往往写在接口的回调函数中，经常会出现忘记改变变量的情况，造成遮罩层该显示和不该显示的逻辑出错。
（4）项目经常是在本地调试，而真实运行却又在线上，（3）中的问题在本地经常无法验证出。因为这些问题经常是在线上网络环境较差的情况出现。如一个按钮按完之后，需要等接口返回才能再次点击，但是本地因为返回速度较快，如果忘记添加遮罩层也不会有什么问题。