用自定义 .gif 动图替换ElementUI的全局loading图标

对于ElementUI的全局loading效果，大家肯定都是见过的，就是一个圆形的加载动图，或者说，是一个正在旋转的loading图标，想要自定义这个loading图标该怎么办呢？

ElementUI自定义全局loading图标

安装puer.js

这个东西相信前端程序员应该都是比较熟悉的，是一个对.gif进行控制的一个小库，非常轻量。

npm i puer.js --save

创建 .gif 动图

在项目文件夹下创建一个名为loading.gif的动图文件，然后上传到项目的静态资源文件夹中。

注册puer

import Vue from 'vue'
import puer from 'puer.js'

Vue.use(puer, {
  // 全局loading配置项
  loading: {
    enterLoading: function (vm) {
      // loading的加载效果配置项
      vm.showLoading = true
      vm.loadingBackground = 'rgba(0, 0, 0, 0.5)' // 背景颜色和透明度
      vm.loadingText = '正在加载中...' // 文字提示
      vm.loadingIcon = 'loading.gif' // 这里的loading.gif，就是刚才创建的动图文件
    },
    showLoading: function (vm) {
      vm.showLoading = true
    },
    hideLoading: function (vm) {
      vm.showLoading = false
    }
  }
})

创建一个vue文件 专门处理loading效果

<template>
  <div>
    <p-button @click="load">点我加载</p-button>
  </div>
</template>

<script>
import { Loading } from 'element-ui'
export default {
  methods: {
    load() {
      this.$showLoading()
      setTimeout(() => {
        this.$hideLoading()
      }, 3000)
    }
  }
}
</script>

使用

<template>
  <div>
    <my-loading></my-loading>
  </div>
</template>

<script>
import MyLoading from './loading.vue'
export default {
  components: {
    MyLoading
  }
}
</script>

总结

以上就是自定义ElementUI的全局loading图标的方法，需要利用puer.js来处理.gif动图。