element中loading加载修改自定义图标

在Element UI中，可以通过全局配置或在单个组件中覆盖来修改loading图标。以下是如何在Element UI中自定义loading图标的示例代码：

1. 全局配置（在main.js中）:

import { Loading } from 'element-ui';
 
// 自定义loading图标
Loading.setDefaultOptions({
  lock: true,
  text: '加载中...',
  spinner: 'el-icon-loading', // 使用自定义图标类名
  background: 'rgba(0, 0, 0, 0.7)'
});

2. 在单个组件中使用（在组件内）:

export default {
  methods: {
    showLoading() {
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-your-custom-icon', // 使用自定义图标类名
        background: 'rgba(0, 0, 0, 0.7)'
      });
      
      // 模拟加载结束后关闭loading
      setTimeout(() => {
        loading.close();
      }, 3000);
    }
  }
}

在上述代码中，el-icon-loading和el-icon-your-custom-icon应替换为您实际使用的图标类名。如果您使用的是自定义图标文件，请确保已经正确引入到项目中。