全局配置遮罩层(VUE Element Ui)

这篇具有很好参考价值的文章主要介绍了全局配置遮罩层(VUE Element Ui)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

组件中

index.js

import ElementUI from 'element-ui'
import { loadingConfig } from './loadingConfig' // 全局的一个基本参数配置

var loading = null
const loadingShow = () => {
  loading = ElementUI.Loading.service(loadingConfig)
}

const loadingHide = () => {
  loading.close()
}

const loadingObj = {
  loadingShow,
  loadingHide
}

export default loadingObj

loadingConfig.js

// 全局页面跳转是否启用loading
export const routerLoading = true

// 全局api接口调用是否启用loading
export const apiLoading = true

// loading参数配置
export const loadingConfig = {
  lock: false,
  text: 'Loading',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.3)'
}

main.js之中,感觉不需要引,但是查的资料写了,先放着

import glo_loading from '@/components/loading/index' // loading组件的简单封装
import { routerLoading } from '@/components/loading/loadingConfig' // 全局的页面跳转loading是否启用

request.js之中文章来源地址https://www.toymoban.com/news/detail-509634.html

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import router from '@/router'
import glo_loading from '@/components/loading/index' // loading组件的简单封装
import { apiLoading } from '@/components/loading/loadingConfig' // 全局的页面跳转loading是否启用

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 50000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    apiLoading ? glo_loading.loadingShow() : ''
    if (store.getters.token) {
      config.headers['utk'] = getToken()
    }
    // console.log(config)
    return config
  },
  error => {
    // do something with request error
    apiLoading ? glo_loading.loadingHide() : ''
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    // 如果是Blob类型,直接返回response
    if (response.data instanceof Blob) {
      apiLoading ? glo_loading.loadingHide() : ''
      return response
    }
    if (response.headers['content-disposition']) {
      apiLoading ? glo_loading.loadingHide() : ''
      return response
    }

    const res = response.data
    // if the custom code is not 20000, it is judged as an error.
    if (res.header.code !== '000000') {
      Message({
        message: res.header.msg || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      if (res.header.code === 'L00001') {
        router.replace({ path: '/notAuth' })
      }
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      apiLoading ? glo_loading.loadingHide() : ''
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      apiLoading ? glo_loading.loadingHide() : ''
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    apiLoading ? glo_loading.loadingHide() : ''
    return Promise.reject(error)
  }
)

export default service

到了这里,关于全局配置遮罩层(VUE Element Ui)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • elemtui 提示消息element-ui message被遮罩层覆盖解决方法

    elemtui 提示消息element-ui message被遮罩层覆盖解决方法   问题原因:  最外层的遮罩z-index设置太大  默认 的el-dialog的z-index是2000起的, 而我们的 message 低于2000的,因此将 el-dialog 的z-index设置低于message就 可以 了  

    2024年02月07日
    浏览(72)
  • element-ui框架的el-dialog弹出框被遮罩层挡住

    解决办法 在el-dialog标签里添加 :modal-append-to-body=‘false’ 问题分析  先来看看element-ui官网提供的属性说明文档 文档解释: 翻译成大白话就是,若el-dialog弹出框设置了modal-append-to-body=\\\'true\\\'(默认)属性,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级),

    2024年02月16日
    浏览(39)
  • element-ui 弹窗里面嵌套弹窗,解决第二个弹窗被遮罩层掩盖无法显示的问题

    当我们在 element-ui 中使用弹窗嵌套弹窗时,会出现第二个弹窗打开时被一个遮罩层挡着,就像下面这样: 下面提供两种解决方案 : 一、第一种方案 我们查询element-ui 官网可以发现 el-dialog 有这样几个属性:  具体使用就是在第一个弹窗中设置 :modal-append-to-body=\\\"false\\\"  和 :ap

    2024年02月11日
    浏览(50)
  • 【vue】Element UIel-dialog 自定义样式 + 去除弹框遮罩层底层可点击

    点开弹框,右侧键盘按钮还需要可以点击 去除 遮罩层+底层内容 可编辑点击 :modal=“false” +css样式 或 如果弹框中有 append-to-body 属性的 一定要去掉 否则遮罩层去掉了,但还是不能点击噢~!!! 去除el-dialog自身弹窗样式 取消el-dialog自带close按钮+点击遮罩关闭弹窗 :show-close

    2024年02月15日
    浏览(56)
  • Vue开发中使用Element UI过程中遇到的问题及解决方案Missing required prop: “value”,Element Plus全局组件配置中文

    一、vue中使用el-table的type=index有时不显示序号 Table 表格 用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。 当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以

    2024年01月16日
    浏览(53)
  • Vue3+element-ui + TS封装全局分页组件

    本文介绍了如何使用Vue3、element-ui和TypeScript封装一个全局分页组件。 在开始之前,你需要安装以下环境: Vue3 element-ui TypeScript 这个分页组件提供以下功能: 支持自定义每页显示条数 支持自定义跳转到指定页码 支持显示总页数和总条数 支持自定义样式 分页组件结构 分页组

    2024年02月12日
    浏览(60)
  • 【bug】vuxUI组件popup弹出框在IOS中遮罩层会遮住页面

    可以增加自定义方法v-transfer-dom transfer-dom’.js // Thanks to: https://github.com/calebroseland/vue-dom-portal

    2024年04月28日
    浏览(78)
  • vue2.x + element-ui提示:找不到node_modules/async-validator/es/index.js文件

    no such file or directory, open ‘xx/node_modules/async-validator/es/index.js’ 我按照提示确实没有在node_modules找到async-validator文件夹,本来是手动npm install了这个文件,但是发现找不到es文件夹了,所以就干脆又运行了一遍安装element-ui包的命令将这个漏掉的包补上了。

    2024年02月02日
    浏览(59)
  • Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库,如何发布到npm并使用(支持全局或按需引入使用),超详细

    以下我以 wocwin-admin-vue2 项目为例 修改目录结构,最终如下 1、导入组件,组件必须声明 name 2、定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册 3、导出的对象必须具有 install,才能被 Vue.use() 方法安装(全局使用) 4、按需引入 5、packa

    2024年02月08日
    浏览(79)
  • 快速解决element ui的组件的版本z-index层级问题

    怎么快速解决 element ui 的组件的版本z-index层级问题 首先你要清楚, element ui 组件( select / dialog ) z-index 的层级从哪里来的。 你看源码就会知道,每次都会混入个 minxin:[Popper] 可以知道,他的层级是从这个 Popper 这里来的, 我们在写组件的时候,只需要获取他的Popper混入方法就

    2024年02月02日
    浏览(495)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包