el-dialog弹框加载等待
时间: 2023-07-31 09:13:16 浏览: 238
等待对话框
您可以使用el-dialog组件的loading属性来实现弹框加载等待的效果。设置loading为true时,弹框会出现一个加载动画,示例代码如下:
```vue
<template>
<div>
<el-button @click="showDialog">打开弹框</el-button>
<el-dialog :visible.sync="dialogVisible" :loading="dialogLoading">
<span>这是弹框内容</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
dialogLoading: false
}
},
methods: {
showDialog() {
this.dialogVisible = true;
this.dialogLoading = true; // 开启加载动画
// 模拟异步加载数据
setTimeout(() => {
this.dialogLoading = false; // 关闭加载动画
}, 2000);
}
}
}
</script>
```
在上述代码中,通过点击按钮打开弹框,同时设置`dialogLoading`为`true`来显示加载动画。在模拟异步加载数据的过程中,通过设置`dialogLoading`为`false`来关闭加载动画。
这样就可以实现el-dialog弹框加载等待的效果。
阅读全文