关闭el-dialog遮罩层,数据请求后el-loading一直在加载
时间: 2023-07-28 19:23:52 浏览: 62
可以通过以下两种方式关闭el-dialog遮罩层:
1. 手动设置visible属性为false:
```html
<el-dialog :visible="dialogVisible" @close="dialogVisible=false">
<!-- 对话框内容 -->
</el-dialog>
```
在数据请求结束后,可以将dialogVisible属性设置为false,这样就可以关闭遮罩层。
2. 使用v-loading指令来控制el-dialog的loading状态:
```html
<el-dialog :visible="dialogVisible" :close-on-click-modal="false">
<div v-loading="loading">
<!-- 对话框内容 -->
</div>
</el-dialog>
```
在数据请求开始时,将loading属性设置为true,el-loading就会显示。当数据请求结束时,将loading属性设置为false,el-loading就会隐藏。
需要注意的是,如果使用v-loading指令来控制el-dialog的loading状态,需要将:close-on-click-modal属性设置为false,否则会在点击遮罩层时关闭el-dialog。
相关问题
在vue中给 el-dialog添加遮罩层效果,请求后端接口开启遮罩层,请求完毕关闭遮罩,避免因数据渲染卡顿问题
为了实现在请求后端接口时开启遮罩层,并在请求完毕后关闭遮罩层的功能,我们需要借助 Vue 的生命周期函数和钩子函数来实现。具体实现步骤如下:
1. 在 `data` 中定义一个 `loading` 变量,用于控制遮罩层的显示和隐藏。
```javascript
data() {
return {
loading: false, // 是否显示遮罩层
// 其他数据...
}
}
```
2. 在需要发送请求的方法中,先将 `loading` 变量设置为 `true`,即显示遮罩层,然后发送请求。
```javascript
methods: {
loadData() {
this.loading = true; // 显示遮罩层
axios.post('/api/data')
.then(res => {
// 处理请求结果
})
.catch(err => {
// 处理请求错误
})
.finally(() => {
this.loading = false; // 隐藏遮罩层
})
}
}
```
3. 在 `el-dialog` 上绑定 `:visible.sync` 属性,用于控制对话框的显示和隐藏,同时将 `:lock-scroll` 属性设置为 `true`,用于显示遮罩层。
```html
<el-dialog :visible.sync="dialogVisible" :lock-scroll="true">
<!-- 对话框内容 -->
</el-dialog>
```
4. 在 `mounted` 钩子函数中,监听 `loading` 变量的变化,根据变化来控制对话框和遮罩层的显示和隐藏。
```javascript
mounted() {
this.$watch('loading', (val) => {
if (val) {
this.dialogVisible = false; // 隐藏对话框
} else {
this.dialogVisible = true; // 显示对话框
}
})
}
```
这样,当执行 `loadData` 方法时,会先显示遮罩层,然后发送请求,请求完毕后再隐藏遮罩层,避免了因数据渲染卡顿问题。同时,由于监听了 `loading` 变量的变化,还可以在遮罩层显示的同时隐藏对话框,提高用户体验。
el-upload的loading在el-dialog 下面
el-upload的loading在el-dialog下面。在代码中,el-dialog是一个弹出框组件,而el-upload是一个文件上传组件。在el-dialog内部,点击确定按钮时会触发submitUpload方法,该方法会调用upLoad方法。在upLoad方法中,会使用axios进行文件上传操作,并显示loading加载动画。因此,el-upload的loading效果是在el-dialog下面的。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [【elementUI】自定义封装el-upload上传内容](https://blog.csdn.net/liqiannan8023/article/details/129043056)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]