vue elementui加载动画
时间: 2023-11-07 07:03:43 浏览: 85
Vue ElementUI提供了多种加载动画效果,可以根据具体需求选择使用。其中一种加载动画是四圆点加载动画,可以通过在id="app"标签内加入以下代码实现:
<div id="loading-mask">
<div class="loading-wrapper">
<span class="loading-dot loading-dot-spin">
<i></i>
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
另一种加载动画是旋涡加载动画,可以通过在id="app"标签内加入以下代码实现:
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">
正在加载,请耐心等待
<br>
<span>V0.1</span>
</div>
</div>
还有一种加载动画是电池状态加载动画,可以根据具体需求选择使用。
请问您还有其他相关问题吗?
相关问题:
1. Vue ElementUI还有哪些加载动画效果?
2. 如何在Vue项目中使用ElementUI加载动画?
3. 如何自定义ElementUI的加载动画样式?
相关问题
elementui加载动画
ElementUI提供了el-loading组件来实现加载动画。使用方法如下:
1. 在需要添加加载动画的元素上添加ref属性,例如:`<div ref="loadingContainer"></div>`
2. 在Vue组件中引入Loading组件:`import { Loading } from 'element-ui';`
3. 在需要触发加载动画的方法中添加如下代码:
```
const loadingInstance = Loading.service({
target: this.$refs.loadingContainer,
fullscreen: false,
text: '加载中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
```
其中,target属性指定需要添加加载动画的元素,fullscreen属性指定是否全屏显示加载动画,text属性指定加载动画下方显示的文字,spinner属性指定加载动画的图标,background属性指定加载动画背景色。
4. 在需要关闭加载动画的方法中添加如下代码:`loadingInstance.close();`
vue elementui 加载中全页加载在提交表单写个案例
好的,以下是一个示例代码:
```
<template>
<div>
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
<div v-if="loading" class="loading">
<el-loading-spinner></el-loading-spinner>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: ''
},
loading: false
}
},
methods: {
submitForm() {
this.loading = true;
this.$refs.form.validate((valid) => {
if (valid) {
// 发送表单数据
setTimeout(() => {
// 模拟请求
this.loading = false;
this.$message({
message: '提交成功',
type: 'success'
});
}, 2000);
} else {
this.loading = false;
this.$message({
message: '表单校验失败',
type: 'error'
});
return false;
}
});
}
}
}
</script>
<style>
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,0.5);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
</style>
```
在这个示例中,我们使用了 `el-loading-spinner` 组件作为加载动画,将其放在一个 `div` 中,并使用 `v-if` 条件渲染控制其显示和隐藏。在点击提交按钮时,将 `loading` 置为 `true`,然后进行表单校验和数据提交,提交成功后将 `loading` 置为 `false`,表示加载完成。
相关推荐
![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)