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

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


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

progress 实例

1. progress.vue

javascript 复制代码
<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

javascript 复制代码
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

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

http.js

javascript 复制代码
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)
})

相关推荐
烛阴21 分钟前
带你用TS彻底搞懂ECS架构模式
前端·javascript·typescript
wayhome在哪31 分钟前
3 分钟上手!用 WebAssembly 优化前端图片处理性能(附完整代码)
javascript·性能优化·webassembly
web前端1231 小时前
# 多行文本溢出实现方法
前端·javascript
人间观察员2 小时前
如何在 Vue 项目的 template 中使用 JSX
前端·javascript·vue.js
EndingCoder2 小时前
安装与环境搭建:准备你的 Electron 开发环境
前端·javascript·electron·前端框架
Lucky_Turtle2 小时前
【electron】一、安装,打包配置
javascript·arcgis·electron
Running_slave2 小时前
Web跨标签页通信应该怎么玩?
javascript·css·后端
雪中何以赠君别2 小时前
Vue 2 与 Vue 3 双向绑定 (v-model) 区别详解
前端·javascript·vue.js
林太白2 小时前
Vue3-ElementPlus使用
前端·javascript·vue.js
不一样的少年_2 小时前
这才是 Vue 驱动的 Chrome 插件工程化正确打开方式
vue.js·chrome·typescript