vue全局Loading

zhangxinrongr

已于 2023-11-02 11:15:42 修改

阅读量244

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript vue.js 前端

于 2023-11-02 11:08:10 首次发布

本文链接：https://blog.youkuaiyun.com/zhangxinrongr/article/details/134177746

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Element-UI框架中创建和管理全局Loading组件，包括startLoading、endLoading函数以及showLoading和hideLoading方法的使用，以及在Vue项目中引入和在页面上应用的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建loading.js

import { Loading } from 'element-ui'

let loadingCount = 0
let loading

const startLoading = (text) => {
  loading = Loading.service({
    lock: true,
    text: text || '拼命加载中...', // 可以自定义文字
    spinner: 'iconfont icon-loading user-loading', // 自定义加载图标类名
    background: 'rgba(0, 0, 0, 0.7)'// 遮罩层背景色
  })
}

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

function showLoading(text) {
  if (loadingCount === 0) {
    startLoading(text)
  }
  loadingCount += 1
}

function hideLoading() {
  if (loadingCount <= 0) {
    return
  }
  loadingCount -= 1
  if (loadingCount === 0) {
    endLoading()
  }
}
export default {
  hideLoading,
  showLoading
}

user-loading.scss

// 全局 loading 
@keyframes rotating {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.el-loading-mask > .el-loading-spinner>.user-loading{
    animation: rotating 2s linear infinite ;
    display: inline-block;
    font-size: 40px !important;
}

main.js 引入

// 全局loading
import '@/styles/user-loading.scss'
import useLoading from './utils/loading'
Vue.prototype.$useLoading = useLoading

页面使用

this.$useLoading.showLoading('正在为您翻译，请稍后...')
this.$useLoading.hideLoading()