vue 全局封装loading

最新推荐文章于 2024-07-19 20:55:59 发布

-小橙子-

最新推荐文章于 2024-07-19 20:55:59 发布

阅读量8k

点赞数 5

分类专栏： VUE 文章标签： vue 全局loading封装

本文链接：https://blog.csdn.net/Riona_cheng/article/details/100098119

版权

本文分享了两种Vue全局loading的封装方法，包括纯动画效果和结合图片的动画实现。提供了具体的loading.vue、loading.js及main.js代码示例，可以在各个组件中便捷地调用并展示loading效果。

摘要由CSDN通过智能技术生成

这里提供两个不同样式的封装案例，具体如下：

案例一：动画实现

loading.vue

<template>
  <div v-if="show" class="lds-spinner">
    <div class="spinner">
      <div class="double-bounce1"></div>
      <div class="double-bounce2"></div>
    </div>
  </div>
</template>
<script>
export default {
   
  name: 'Loading',
  props: {
   
    show: Boolean
  },
  data() {
   
    return {
   
    }
  }
}
</script>
<style lang="scss" scoped>
.lds-spinner{
   
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.spinner {
   
  width: 25px;
  height: 25px;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%);
  .double-bounce1, .double-bounce2 {
   
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #FF000F;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-