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)
})

相关推荐
四月友人A7 分钟前
不要再用addEventListener了!这个API救了我的命
javascript
袋鱼不重9 分钟前
手把手搭建Vue轮子从0到1:4. Reactivity 模块的实现
前端·vue.js·源码
大明8835 分钟前
数组的空项(empty slots)处理行为
前端·javascript
用户15129054522038 分钟前
HTML5 Canvas
前端·javascript
尝尝你的优乐美1 小时前
前端查缺补漏系列(一)JS对象及其扩展
前端·javascript·面试
江城开朗的豌豆1 小时前
Vue做SEO太难?6年老司机带你轻松搞定!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue性能优化实战:让你的应用快如闪电⚡
前端·javascript·vue.js
前端Hardy1 小时前
HTML&CSS:有趣的轮播图
前端·javascript·css
劫大大1 小时前
前端页面导出pdf功能,完美解决分页截断问题,添加页眉页脚
前端·vue.js
随笔记2 小时前
uniapp蓝牙连接设备并发送接收信息
javascript·uni-app·app