elemen-ui loading 设置自动关闭
时间: 2024-02-06 19:09:52 浏览: 20
你可以使用 `this.$loading()` 方法创建一个 loading 实例,然后设置 `duration` 属性来控制 loading 自动关闭的时间,例如:
```javascript
// 创建 loading 实例
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
// 设置自动关闭时间为 3 秒
loading.duration = 3000
```
上述代码中,我们先使用 `this.$loading()` 方法创建了一个 loading 实例,然后将 `duration` 属性设置为 3000 毫秒,也就是 3 秒,表示 loading 会在 3 秒后自动关闭。
相关问题
element-ui loading文字颜色改变
要改变 Element UI 的 Loading 组件文字颜色,可以通过 CSS 的方式来实现。具体做法如下:
1. 在需要使用 Loading 的组件中,添加一个自定义的类名,例如 `my-loading-class`。
2. 在样式文件中添加以下 CSS 代码,将 `.my-loading-class` 中的文字颜色设置为需要的颜色:
```css
.my-loading-class .el-loading-text {
color: #ff0000; /* 设置为红色 */
}
```
其中,`#ff0000` 可以替换为任何你想要的颜色值。
3. 在需要使用 Loading 的组件中,将 `class` 属性设置为 `my-loading-class`,即可应用自定义样式。
例如,在使用 `el-button` 组件时,可以这样写:
```html
<el-button class="my-loading-class" :loading="true">加载中...</el-button>
```
这样,Loading 组件的文字颜色就会被设置为红色。
vue3中element-ui loading加载文字颜色改变
在Vue3中使用Element-UI的Loading组件,可以通过以下方式修改加载文字的颜色:
1. 在全局CSS中修改:
```css
.el-loading-text {
color: red;
}
```
2. 在组件中通过scoped CSS修改:
```vue
<template>
<div>
<el-button @click="showLoading">显示Loading</el-button>
<el-loading :text="loadingText" :visible="loadingVisible" :background="loadingBgColor" class="loading-wrapper">
</el-loading>
</div>
</template>
<script>
export default {
data() {
return {
loadingText: '加载中...',
loadingVisible: false,
loadingBgColor: '#fff'
}
},
methods: {
showLoading() {
this.loadingVisible = true;
}
}
}
</script>
<style scoped>
.loading-wrapper .el-loading-text {
color: red;
}
</style>
```
在上面的代码中,我们通过在`.loading-wrapper`下面添加`.el-loading-text`的方式,修改了加载文字的颜色为红色。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)