ant Design Vue

ant Design Vue 自定义loading

今天又来更新一下 踩坑日记 希望 大家不要跟着一起填坑 就好！事情了，是这样的 UI设计 提出一个需求 认为 ant Design 的Spin 图标不好看 和我们的风格不搭 需要换成我们自己的图标！首先是看文档 能不能更换，果不然文档上写的很清楚
perfect，我就跟着他的demo 写了 但是感觉不对 因为只能添加 自带的icon 但自带的 icon 根本满足不了我们 那就相当于 我改loading 还的需要自定义图标 有点不科学。所以这时候，想到了万能的百度，谁知万能的百度也有失误的时候，找了小几个小时，没有找到的合适的答案和有效的灵感，没有办法，又只能在仔细研究文档，认真看文档的每一句话，眼看就要下班了，还是没有找到合适的解决方案及思路，个人的缺点就是 解决不了这个问题 今晚一定睡不好 我不知道你们是否也是这样，但是天冷了 都催着下班了，想着那就下班吧 也许在路上会有一点灵感了 但是知道到家 睡觉都没有想到怎么解决，果不然失眠了，想了一晚上，想出了两个解决方案第一自己写 第二 在找找文档，如果自己写的话 那何必要用框架了 不是写不出来 其实自己写更简单 因为 之前同事说过一句话 既然选择了框架 那么就尽量用框架提供的方法来实现。想想也是。早上上班的第一件事，继续研究一下文档，研究一下有没有提供 全局修改的方法，就在这时 一机灵，看到了一个宝贝

文档写的非常清楚，你可以自定义全局默认元素 这不就是我想了一晚上的答案吗？实现起来非常简单 不BB了 直接上代码吧

<script>
import { Spin } from "ant-design-vue";
export default {
  data() {
    return {};
  },
mounted() {
    Spin.setDefaultIndicator({
      indicator: {
        render() {
          return (
            <i class="" style="left:calc(50% - 20px)">
              <img src="https://dlhr.oss-cn-hangzhou.aliyuncs.com/img/201210/fc8557d3b59a4f33b57c8925f99c85474bc7c7a54ce045fba84c08ffa6611ecf.gif" style="width:40px; height:40px;"/>
            </i>
          );
        }
      }
    });
  }
  }
  </script>

最终效果 是不是很简单 希望能帮到您