浅改一下Element Plus的Loading效果

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

前段时间在跟的项目已经接近尾声，在这个过程中也遇到了很多问题，收获了许多。前两天为项目补了一个加载loading的效果，在实现的过程中遇到些困难也有一些小小感悟，于是写下这篇来记录一下。若有不对，请各位多多指正。

官方的全屏loading效果及代码

官方核心代码：

<template>
  <el-button type="primary" @click="openFullScreen2"> As a service </el-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElLoading } from 'element-plus'
const fullscreenLoading = ref(false)
const openFullScreen2 = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
}
</script>

而我要修改的是把里面的图片和文字换为自己需要的。修改文字是很简单的，直接在ElLoading.service里的text修改就行，没头绪就在与不知道如何换掉它的默认图片

修改过程

• 1.先分析这个Loading的结构

由上图可以明显看它分为三层，最外层是el-loading-spinner，第二层是circular，最里面的一层是svg即旋转的图片所在之处。因此修改肯定是从第二层和第三层入手咯。

• 2.网上大部分文章实现的方法是通过给el-loading-spinner添加gif的图片作为背景，并且把circular的display设置为none来实现的

.el-loading-spinner{
    background: url('../assets/test.gif') no-repeat center;
      background-size: 200px 120px;
      height: 100%;
      top: 0;
      .circular{
        display: none; 
      }
      .el-loading-text {
      margin-top: 1130px;
    }
  }

实现效果：

这个方法确实是可行的，但同时也带来了限制：只能用gif动图。

那假如我就是要用png、jpg等格式呢，那要怎么样才能实现呢？ 当选择这些格式的时候是无法自动旋转的，因此我们得给它加上animation的旋转动画效果。

.el-loading-spinner{
    background: url('../assets/kobe.jpg') no-repeat center;
      background-size: 200px 120px;
      height: 100%;
      top: 0;
      animation: test 1s infinite;
      .circular{
        // display: none;
      }
      .el-loading-text {
      margin-top: 1130px;
    }
  }
  
  <style>
      ...
      @keyframes test {
    100% {
      transform: rotate(360deg);
    }
  }
  </style>

但效果却不是我们相要的

-3.查阅Loading的源码 惊人的发现可以自己设置svg噢！

-4.最终实现效果：

指令方法

指令的方法大家有兴趣也可以自行了解一下