Vue main.js引入全局progress组件原型实例，加载中动画组件原型实例

main.js引入全局组件原型实例

progress 实例

1. progress.vue

<template>
  <div v-show="isShowProgress" class="el-loading-mask is-fullscreen">
    <div class="el-loading-spinner">
      <el-progress :percentage="percentage" stroke-width="12"></el-progress>
    </div>
  </div>
</template>

<script>
export default {
  name: "loading",
  data() {
    return {
      // 进度条
      isShowProgress: false,
      percentage: 70,
    }
  },
}
</script>

<style lang="scss" scoped>
// 进度条
.el-loading-mask {
  // background: transparent;
  z-index: 10001;
  .el-progress {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
}
</style> 

2. proto.js

import progressVue from './progress.vue'
export default {
  install: (Vue) => {
    // ------------------ progress 进度条 ------------------
    const ProgressComponent = Vue.extend(progressVue);
    const newProgressCom = new ProgressComponent();
    const tpProgress = newProgressCom.$mount().$el;
    document.body.appendChild(tpProgress);
    Vue.prototype.$showchangeProgress = () => {
      newProgressCom.isShowProgress = true
    }
    Vue.prototype.$hidechangeProgress = () => {
      newProgressCom.isShowProgress = false
    }
  }
}

引入及使用

main.js

// 全局组件原型实例
import publicProto from '@/common/js/proto.js'
Vue.use(publicProto)

http.js

import Vue from 'vue'
// 定义Vue实例 调用全局显示和关闭loading方法
const vm = new Vue()
// 请求拦截
axios.interceptors.request.use(function (config) {
  // 在这里调用 显示loading方法
  vm.$showLoading()
  vm.$showchangeProgress()
  return config
}, function (error) {
  vm.$hideLoading()
  vm.$hidechangeProgress()
  // 在请求出错调用 关闭loading方法
  return Promise.reject(error)
})
// 响应拦截
axios.interceptors.response.use(function (response) {
  // 在这里调用 关闭loading方法
  vm.$hideLoading()
  vm.$hidechangeProgress()
  return response
}, function (error) {
  // 在这里调用 关闭loading方法
  vm.$hideLoading()
  vm.$hidechangeProgress()
  return Promise.reject(error)
})