Vue接口监听遮罩：通往高效编码之捷径

前端

2024-01-02 21:24:22

前言

在前端开发中，使用遮罩层来屏蔽用户的非正常操作，是一种常见的实践。然而，在一些项目中，遮罩层并没有进行统一管理，导致了以下问题：

所有的业务组件都要引入遮罩层组件，这使得组件在项目的各个角落都存在，不利于管理和代码复用。
难以对遮罩层进行统一控制和样式调整，导致页面整体风格不统一。
由于缺乏全局管理，遮罩层可能会在不适当的时候显示或隐藏，影响用户体验。

Vue接口监听遮罩：优雅解决方案

为了解决上述问题，我们可以使用Vue的全局指令来实现对接口请求的监听，并在请求期间自动显示遮罩层。这种方式具有以下优点：

代码复用性强： 只需要在根组件中定义一次遮罩层指令，即可在项目中的所有组件中使用，无需在每个组件中重复引入遮罩层组件。
全局控制： 可以轻松地对遮罩层的显示和隐藏进行统一控制，并且可以根据不同的请求类型或状态设置不同的样式。
用户体验优化： 当接口请求发送时，遮罩层会自动显示，并在请求完成后自动隐藏，让用户清楚地知道当前的加载状态，避免了不必要的等待和困惑。

实现步骤

安装依赖： 在项目中安装Vue和axios库。
创建遮罩层组件： 创建一个名为Mask.vue的组件，代码如下：

<template>
  <div class="mask" v-if="show">
    <div class="loading-icon"></div>
    <p>正在加载...</p>
  </div>
</template>

<script>
export default {
  props: ['show'],
};
</script>

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-icon {
  width: 50px;
  height: 50px;
  border: 5px solid #fff;
  border-radius: 50%;
  border-top-color: #000;
  animation: loading 1s linear infinite;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

创建全局指令： 在项目根组件中创建一个名为mask指令的全局指令，代码如下：

import { ref } from 'vue';
import axios from 'axios';

export default {
  mounted() {
    const loading = ref(false);

    axios.interceptors.request.use((config) => {
      loading.value = true;
      return config;
    }, (error) => {
      loading.value = false;
      return Promise.reject(error);
    });

    axios.interceptors.response.use((response) => {
      loading.value = false;
      return response;
    }, (error) => {
      loading.value = false;
      return Promise.reject(error);
    });

    this.$root.$options.loading = loading;
  },
};