Vue-ElementUI 自定义加载图实现

本文主要介绍如何在Vue项目中，结合ElementUI框架自定义Loading图，以满足替换默认加载图，特别是使用自定义GIF图的需求。 在ElementUI中，默认的Loading图是有限的，通常只能选择框架提供的图标。然而，在实际开发中，有时我们需要根据设计需求使用自己的GIF动图作为加载指示器。以下是一种自定义ElementUI Loading图的方法： 1. 创建自定义样式 首先，在`asserts`目录下新建一个名为`css`的文件夹，然后在此文件夹内创建一个名为`myCss.css`的CSS文件。在这个文件中，我们将定义自定义的Loading样式。例如： ```css .el-loading-spinner { background-image: url('../img/loading.gif'); background-repeat: no-repeat; background-size: 200px 120px; /* 根据GIF图尺寸调整 */ height: 100px; width: 100%; background-position: center; top: 40%; /* 根据布局调整 */ } .el-loading-spinner.circular { display: none; /* 隐藏ElementUI默认的loading动画 */ } .el-loading-spinner.el-loading-text { margin: 85px 0; /* 让文字位于loading图下方 */ } ``` 这段代码将加载GIF图作为背景，并设置相应的位置和大小。记得根据实际GIF图的尺寸和位置进行调整。 2. 导入自定义样式 在项目的主入口文件（通常是`main.js`）中，确保在引入ElementUI的样式之后，再引入自定义的`myCss.css`。这样可以保证自定义样式覆盖ElementUI的默认样式： ```javascript import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); // 引入ElementUI // 导入自定义的elementUI loading样式 import './assets/css/myCss.css'; ``` 3. 应用自定义Loading 在Vue组件中，通过`v-loading`指令使用自定义的Loading图。例如： ```html <el-container v-loading="loading"> <!-- 页面内容 --> </el-container> ``` 在组件的数据对象中定义`loading`属性，控制Loading图的显示与隐藏： ```javascript data() { return { loading: false, // 控制加载状态 }; }, ``` 当`loading`为`true`时，自定义的Loading图将会显示，反之则隐藏。 通过以上步骤，你可以在Vue项目中成功地自定义ElementUI的Loading图，实现加载指示器与项目设计风格的统一。在实际调整过程中，可能需要使用浏览器的开发者工具进一步微调样式，以达到最佳的视觉效果。