Vue全局loading以及错误提示

2023-09-14 18:27:58

全局loading

安装vue-loading-overlay组件库：

npm install vue-loading-overlay --save

在main.js文件中导入组件库：

import Vue from 'vue'
import VueLoading from 'vue-loading-overlay'

Vue.use(VueLoading)

在根组件中创建一个全局变量来控制loading状态：

export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    showLoading() {
      this.loading = true
    },
    hideLoading() {
      this.loading = false
    }
  }
}

在需要显示loading的组件中使用v-if指令来控制loading状态：

<template>
  <div v-if="loading">
    <loading />
  </div>
  <!-- 其他内容 -->
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    showLoading() {
      this.loading = true
    },
    hideLoading() {
      this.loading = false
    }
  }
}
</script>

错误提示

使用axios库来发送HTTP请求：

npm install axios --save

在main.js文件中导入axios库：

import Vue from 'vue'
import axios from 'axios'

Vue.use(axios)

在根组件中创建一个全局变量来控制错误提示：

export default {
  data() {
    return {
      error: null
    }
  },
  methods: {
    showError(error) {
      this.error = error
    },
    clearError() {
      this.error = null
    }
  }
}

在需要显示错误提示的组件中使用v-if指令来控制错误提示：

<template>
  <div v-if="error">
    <error-message :error="error" />
  </div>
  <!-- 其他内容 -->
</template>

<script>
export default {
  data() {
    return {
      error: null
    }
  },
  methods: {
    showError(error) {
      this.error = error
    },
    clearError() {
      this.error = null
    }
  }
}
</script>