vue自定义全局loading

最新推荐文章于 2025-07-30 15:48:10 发布

微笑边缘的金元宝

最新推荐文章于 2025-07-30 15:48:10 发布

阅读量742

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/HeMister/article/details/98104166

vue 专栏收录该内容

20 篇文章

订阅专栏

本文深入解析Vue中的加载组件实现方式，展示如何通过自定义组件在页面中显示加载动画，包括组件的HTML模板、样式设置及如何在应用中调用该组件进行页面加载效果的展示。

//loading.vue
<template>
  <div class="load">
    <div class="load-content">
      <img :src="require('src/static/images/loading.gif')"/>
      <slot></slot>
    </div>
    <div class="load-mark"></div>
  </div>
</template>
<script>
export default {
  // loading组件
  name: 'loading'
}
</script>
<style scoped lang="less">
.load{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index: 4000;
  &-content{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scaleY(-50%);
    z-index: 4002;
    img{
      width:15%;
    }
  }
  &-mark{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 4001;
    background: #fff;
    opacity: 0.6;
  }
}
</style>

//loading/index.js
import load from './loading.vue'
import Vue from 'vue'
let _loading = null
const loading = {
  show(con = {}) {
    let Instance = Vue.extend(load)
    let vm = new Instance()
    for (let i in con) {
      vm[i] = con[i]
    }
    _loading = vm.$mount().$el
    document.body.appendChild(_loading)
  },
  clear() {
    if (_loading && _loading.contains && document.body.contains(_loading)) {
      document.body.removeChild(_loading)
      _loading = null
    } 
  }
}
export default loading