当前位置: 首页 > article >正文

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

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

  • progress 实例
    • 1. progress.vue
    • 2. proto.js
  • 引入及使用
    • main.js
    • http.js


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


http://www.kler.cn/a/377190.html

相关文章:

  • 【Git】—— 使用git操作远程仓库(gitee)
  • 如何训练Stable Diffusion 模型
  • JS 异步 ( 一、异步概念、Web worker 基本使用 )
  • 表达式语句、复合语句和空语句
  • CS 144 check7: putting it all together
  • Glossary 词汇表中英文对照
  • 在B端管理系统中,复杂或者DIY功能,都依赖哪些编辑器/设计器
  • 从技术与市场角度看:3D 创作软件与信创系统的 “距离”
  • node.js下载、安装、设置国内镜像源(永久)(Windows11)
  • Django-中间件
  • 如何理解ref,toRef,和toRefs
  • 《云计算网络技术与应用》实训8-1:OpenvSwitch简单配置练习
  • 写一个 EventBus 实现微信小程序的发布订阅,支持全局消息通知、跨页面通信,高效好用!
  • 形态学操作篇 原理公式代码齐活
  • Redis常见面试题:ZSet底层数据结构,SDS、压缩列表ZipList、跳表SkipList
  • 《GBDT 算法的原理推导》 11-13初始化模型 公式解析
  • flask框架用法介绍(二):Flask和forms
  • 百度SEO与SEM到底有什么区别?福建企业老板们需要了解的关键点【百度SEO专家】
  • 高效视频制作大提速,视频剪辑软件的高级自定义命令功能批量调整视频的色调、饱和度和亮度,轻松驾驭视频编辑技巧
  • JAVA WEB — HTML CSS 入门学习
  • k8s技术全景:架构、应用与优化
  • PyQt5实战——多脚本集合包,UI以及工程布局(二)
  • ds 启动flink 任务报错
  • Ubuntu22.04 安装图形界面以及XRDP教程
  • 基于vue框架的的考研信息共享平台v0eyp(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
  • 笔记本脱机状态