element Loading在vue中使用

### 如何在 Vue 中使用 Element UI 的 Loading 组件 为了在 Vue 应用程序中使用 Element UI 的 `Loading` 组件，可以按照以下方法实现功能。以下是详细的说明： #### 安装 Element UI 如果尚未安装 Element UI，则可以通过 npm 或 yarn 进行安装[^1]。 ```bash npm install element-ui --save ``` 或者， ```bash yarn add element-ui ``` #### 引入整个库或按需加载 引入方式有两种：全局引入整个 Element UI 和按需加载特定组件。推荐按需加载以减少打包体积[^2]。 ##### 方法一：全局引入 在项目的入口文件（通常是 main.js）中添加如下代码： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` ##### 方法二：按需加载 通过 babel-plugin-component 插件来实现按需加载。首先安装插件： ```bash npm install babel-plugin-component --save-dev ``` 然后，在 `.babelrc` 文件中配置插件： ```json { "plugins": [ ["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ]] ] } ``` 接着仅导入所需的组件即可： ```javascript import Vue from 'vue'; import { Loading } from 'element-ui'; Vue.use(Loading.directive); // 注册指令形式的 loading ``` #### 使用 Directive 方式 Element 提供了一个简单的 directive 来控制页面局部区域的加载状态。可以在模板中的任何 DOM 元素上绑定该指令并传参给它[^3]。 ```html <template> <div v-loading="isLoading"> <!-- 需要显示的内容 --> </div> </template> <script> export default { data() { return { isLoading: true, // 控制loading的状态 }; }, }; </script> ``` 当变量 `isLoading` 被设置为 false 后，加载动画会自动消失。 #### Service 形式的调用 除了作为指令外，还可以利用 service API 创建更灵活的服务层实例化对象来进行操作[^4]。 下面是一个例子展示如何手动开启和关闭一个全屏遮罩效果: ```javascript // 导入服务函数 import { Loading } from 'element-ui'; let loadingInstance; methods: { startLoading() { loadingInstance = Loading.service({ fullscreen: true, text: '拼命加载中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); }, endLoading() { if (loadingInstance) { loadingInstance.close(); } } } ``` 以上就是关于如何在 Vue 中集成以及应用 Element UI 的 Loading 功能的具体介绍[^5]。