ElLoading.service
时间: 2024-05-14 22:16:06 浏览: 15
ElLoading.service 是一个由 Element UI 框架提供的 Loading 加载指示器服务。该服务可以在页面中显示一个 Loading 指示器,以提示用户正在进行某些操作,防止用户进行重复操作或误操作。
使用 ElLoading.service 需要先在项目中引入 Element UI 框架,并在需要使用的组件或页面中进行注册。注册后,可以通过调用该服务的方法来显示或隐藏 Loading 指示器。
例如,在 Vue.js 中使用 ElLoading.service 可以这样写:
```javascript
import { Loading } from 'element-ui';
// 注册服务
Vue.use(Loading.directive);
// 显示 Loading 指示器
const loadingInstance = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 隐藏 Loading 指示器
loadingInstance.close();
```
其中,`lock` 表示是否锁定页面,防止用户进行其他操作;`text` 表示 Loading 指示器中显示的文本;`spinner` 表示 Loading 指示器中显示的图标;`background` 表示 Loading 指示器的背景颜色。
相关问题
使用ElLoading.service如何自定义图标为vue组件
您可以通过在组件中引入一个自定义的 loading 组件,然后在调用 ElLoading.service() 时传入该组件名来实现自定义图标。具体操作步骤如下:
1. 编写自定义 loading 组件,例如 MyLoading.vue。
2. 在需要使用 ElLoading.service() 的组件中引入 MyLoading.vue 组件:
```
<template>
<div>
<!-- 其他组件内容 -->
<my-loading></my-loading>
</div>
</template>
<script>
import MyLoading from 'path/to/MyLoading.vue'
export default {
components: {
MyLoading
}
// 其他选项
}
</script>
```
3. 在调用 ElLoading.service() 时传入组件名:
```
import {ElLoading} from 'element-ui'
// ...
const loadingInstance = ElLoading.service({
text: 'Loading...',
lock: true,
spinner: 'my-loading' // 传入组件名
})
// ...
```
这样就可以通过自定义 loading 组件来使用 ElLoading.service(),并实现自定义 loading 图标了。
// 打开遮罩层 function loading(content:string) { loadingInstance = ElLoading.service({ lock: true, text: content, background: 'rgba(0, 0, 0, 0.7)', }) console.log('ccccccccc',content) } 问题:element Loading文字不会变化
你的代码中使用了 Element UI 的 Loading 组件,在调用 `ElLoading.service` 方法时传入了 `text` 参数,但是当你需要更新 `text` 时,Loading 组件并没有自动更新。这是因为 Loading 组件的 `text` 是在组件创建时就已经确定的,后续的更改并不会影响到已经创建的组件。
如果你需要更新 Loading 组件的 `text`,可以先保存 `loadingInstance` 对象,然后在需要更新时调用 `loadingInstance.setText(content)` 方法,将新的文本内容传入即可。例如:
```
let loadingInstance = null;
function loading(content: string) {
loadingInstance = ElLoading.service({
lock: true,
text: content,
background: 'rgba(0, 0, 0, 0.7)',
});
}
// 在需要更新文本时调用
loadingInstance.setText('新的文本内容');
```
相关推荐
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)