element怎么全屏loading
时间: 2023-05-12 08:03:29 浏览: 117
您可以使用以下代码将 element 全屏 loading:
```javascript
this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
```
其中,`lock` 参数用于锁定背景,`text` 参数用于显示加载文本,`spinner` 参数用于指定加载图标,`background` 参数用于指定背景颜色。
相关问题
修改elementui全屏loading服务方式样式
要修改 Element UI 的全屏 Loading 服务方式的样式,你可以通过自定义 CSS 来实现。以下是一种可能的方法:
1. 在你的项目中创建一个全局的 CSS 文件(例如 `styles.css`)。
2. 打开 Element UI 官方文档,找到全屏 Loading 的 CSS 类名。通常情况下,类名为 `el-loading-parent--relative`。
3. 在 `styles.css` 文件中,使用该类名来修改样式。例如,你可以修改背景颜色和加载图标的颜色:
```css
.el-loading-parent--relative {
background-color: #f0f0f0; /* 修改背景颜色 */
}
.el-loading-parent--relative .el-loading-spinner .path {
stroke: #333; /* 修改加载图标的颜色 */
}
```
4. 在你的项目中引入 `styles.css` 文件,确保它在 Element UI 样式之后引入,这样你的自定义样式会覆盖默认样式。
这样,你就可以通过自定义 CSS 来修改 Element UI 全屏 Loading 的样式了。记得在项目中使用全屏 Loading 时,它会应用你的自定义样式。
element ui loading组件源码是怎样的
Element UI 的 loading 组件源码如下所示:
```html
<template>
<div class="el-loading-mask" v-if="visible" :style="maskStyle">
<div class="el-loading-spinner" :style="spinnerStyle">
<svg viewBox="25 25 50 50" class="circular">
<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
</svg>
<p v-if="text" class="el-loading-text">{{ text }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'ElLoading',
props: {
visible: {
type: Boolean,
default: false
},
text: String,
fullscreen: Boolean,
spinner: {
type: String,
default: 'el-icon-loading'
},
background: {
type: String,
default: 'rgba(255, 255, 255, 0.7)'
}
},
computed: {
maskStyle() {
return {
backgroundColor: this.background
};
},
spinnerStyle() {
return {
fontSize: this.fullscreen ? '80px' : '40px'
};
}
}
};
</script>
<style scoped>
.el-loading-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.el-loading-spinner {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.circular {
animation: rotate .8s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.el-loading-text {
margin-top: 10px;
font-size: 14px;
}
</style>
```
以上是简化过的代码,包含了 loading 组件的模板、脚本和样式部分。
在模板中,使用了 `v-if` 指令判断 `visible` 属性是否为 true,控制 loading 遮罩层的显示与隐藏。loading 遮罩层内部包含了一个 loading 动画的 SVG 图标和一个文本提示。
在脚本部分,定义了组件的名称为 `ElLoading`,并接收了一些属性,如 `visible` 控制 loading 的显示与隐藏、`text` 设置文本提示、`fullscreen` 是否全屏显示、`spinner` 设置 loading 动画图标、`background` 设置遮罩层背景色。还使用了计算属性来动态设置遮罩层和 loading 动画的样式。
在样式部分,设置了 loading 遮罩层的样式,并定义了 loading 动画的旋转效果以及文本提示的样式。
以上就是 Element UI loading 组件的简化源码。希望对您有所帮助!如有任何疑问,请随时提问。
相关推荐
![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)