vue全局Loading_vue 全局loading

创建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()