elementui loading自定义图标和字体样式

在Element UI中，可以通过全局配置或在单个组件中覆盖默认的Loading图标和字体样式。以下是如何自定义Loading的样式：

1. 全局配置Loading图标：

在main.js中，可以配置全局的Loading图标，如下所示：

import { Loading } from 'element-ui';
 
// 自定义Loading图标
Loading.setDefaultOptions({
  spinner: 'el-icon-loading', // 自定义图标类名
  background: 'rgba(0, 0, 0, 0.7)' // 自定义背景颜色
});

2. 单个组件中覆盖Loading样式：

在组件内部，可以在调用Loading.service()时直接传递options对象来覆盖默认样式：

export default {
  methods: {
    showLoading() {
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-my-custom-icon', // 自定义图标类名
        background: 'rgba(0, 255, 0, 0.5)' // 自定义背景颜色
      });
      
      // 模拟加载
      setTimeout(() => {
        loading.close();
      }, 3000);
    }
  }
}

请确保自定义的图标类名存在于你的样式文件中，以确保图标可以正确显示。同时，确保字体图标或图片资源已正确引入项目中。

注意：以上代码示例假设你已经正确安装并引入了Element UI库。