如何在Vue项目中添加接口监听遮罩

在Vue项目中，可以使用Vue的全局事件总线和axios拦截器配合使用，实现添加接口监听遮罩的效果。

以下是具体的步骤：

第一步：创建全局事件总线

在Vue项目的入口文件（例如main.js）中，创建全局事件总线：

import Vue from 'vue'
const EventBus = new Vue()
export default EventBus

第二步：创建axios拦截器

在Vue项目中使用axios进行数据请求，可以通过axios的拦截器来实现添加接口监听遮罩的效果。

在项目中的某个公共js文件中，创建axios拦截器：

import axios from 'axios'
import EventBus from '@/utils/EventBus'

axios.interceptors.request.use(
  config => {
    // 请求发出前，触发全局事件，添加遮罩
    EventBus.$emit('request_start')
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

axios.interceptors.response.use(
  response => {
    // 请求成功，触发全局事件，移除遮罩
    EventBus.$emit('request_end')
    return response
  },
  error => {
    // 请求失败，触发全局事件，移除遮罩
    EventBus.$emit('request_end')
    return Promise.reject(error)
  }
)

第三步：在需要添加遮罩的组件中监听全局事件

在需要添加接口监听遮罩的组件中，通过监听全局事件来添加和移除遮罩。

import EventBus from '@/utils/EventBus'

export default {
  data() {
    return {
      loading: false
    }
  },
  created() {
    // 监听全局事件，添加遮罩
    EventBus.$on('request_start', () => {
      this.loading = true
    })
    // 监听全局事件，移除遮罩
    EventBus.$on('request_end', () => {
      this.loading = false
    })
  },
  beforeDestroy() {
    // 移除监听
    EventBus.$off('request_start')
    EventBus.$off('request_end')
  }
}

在上述示例中，我们可以通过监听 request_start 和 request_end 两个事件，在请求开始时添加遮罩，请求结束时移除遮罩。

下面再给出一个使用element-ui中的loading组件来实现遮罩效果的示例：

import EventBus from '@/utils/EventBus'
import { Loading } from 'element-ui'

export default {
  data() {
    return {
      loadingInstance: null
    }
  },
  created() {
    EventBus.$on('request_start', () => {
      this.loadingInstance = Loading.service({
        fullscreen: true
      })
    })
    EventBus.$on('request_end', () => {
      this.loadingInstance.close()
    })
  },
  beforeDestroy() {
    EventBus.$off('request_start')
    EventBus.$off('request_end')
  }
}

在上述示例中，我们使用 element-ui 中的 Loading 组件来创建遮罩效果，使用 fullscreen 属性将遮罩覆盖全局，实现自动监听所有接口请求。在请求开始和结束时，分别创建和关闭 Loading 实例来实现遮罩的添加和移除。