el-dialog弹框加载中
时间: 2023-07-31 07:08:18 浏览: 213
你可以使用 `loading` 属性来实现 `el-dialog` 弹框的加载中效果。将 `loading` 属性设置为 `true`,弹框将显示加载中的状态,直到你将 `loading` 属性设置为 `false`。
以下是一个示例代码:
```html
<template>
<div>
<el-button @click="openDialog">打开弹框</el-button>
<el-dialog :visible="dialogVisible" :loading="loading">
<span>内容加载中...</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
loading: false
};
},
methods: {
openDialog() {
this.dialogVisible = true;
this.loading = true;
// 模拟异步加载
setTimeout(() => {
this.loading = false;
}, 2000);
}
}
};
</script>
```
在上面的示例中,当点击 "打开弹框" 按钮时,弹框会显示,并且加载状态会持续2秒(通过 `setTimeout` 模拟异步加载),之后加载状态会消失。
你可以根据实际需求调整代码,例如通过 API 请求获取数据,然后在数据加载完成后将 `loading` 属性设置为 `false`。
阅读全文