个人猜测是Element Plus组件库的v-loading指令不支持el-dialog组件上使用 解决方案1 加一个全局loading,Element Plus组件库不但可以通过v-loading指令实现,也支持以服务的形式实现,关键代码如下: import{ElLoading}from"element-plus";constloading =ElLoading.service({lock:true,text:"数据加载中...",background:"r...
当v-loading设置fullscreen时,el-dialog模态框会被v-loading的遮罩层遮住,这时候,我用了很多种方法,包括设置z-index等,都没什么作用。调试的过程中发现,如果el-dialog不垂直居中,就不会被遮住。 但我宁愿v-loading不居中,也不想让模态框不居中啊。所以我取消了v-loading的fullscreen,直接用定位让加载图标屏幕居中...
如果 el-loading 无法在 el-dialog 中使用,可能是使用方式不正确或存在其他干扰因素。 2. 确保el-loading的引入和注册正确 确保您已经在项目中正确引入了 el-loading 组件。如果您是使用 Vue 并通过 npm 安装的 Element Plus 或 Element UI,那么通常不需要额外引入,因为它们是内置组件。但如果是按需引入,需要确保...
<template> <el-dialog ref="dialogRef" v-model="dialogVisible" > ... <template #footer> <el-button @click="save">save</el-button> </template> </el-dialog> </template> <script setup lang="ts"> import { ref } from 'vue' import { ElLoading } from 'element-plus' const dialogRef...
说明:这里使用的代码是 vue3 + TypeScript,下面是全部代码: <template> <div> <el-dialog :title="title" v-model="open" width="500px" :close-on-click-modal="false" // 鼠标点击弹窗外部不关闭弹窗 :close-on-press-escape="false" // 按下esc键不关闭弹窗 ...
如果在对话框打开以后,再请求API,是不是就可以了。我便将请求API的语句放在Dialog 打开动画结束时的回调函数 opened中。果然,这次我打开对话框的时候,loading动画覆盖在了对话框之上,成功解决问题! 记在最后,关于前端中,各种执行,渲染的顺序还需要继续深入了解才是。
ElementUI version 1.4.2 el-table v-loading的状态下,打开el-dialog后el-table的loading-mask 会在el-dialog之上: https://jsfiddle.net/vynp2e2b/
本身不依赖外部的图片元素,可以和 ElDialog 一样直接使用visible属性来控制显示和隐藏。 <template><el-dialog:title="title":visible="visible":close-on-click-modal="false"width="1000px"destroy-on-closeappend-to-body@close="closeDialog"><div class="q-picture__img-box"><divclass="q-picture__pre...
为了解决这个问题,我们可以使用el-dialog组件的loading属性。loading属性是一个布尔值,当设置为true时,对话框将显示一个加载中的状态。我们可以使用这个属性来在对话框打开时显示加载状态,并在数据加载完成或异步操作完成后将其设置为false。 下面是一个简单的示例代码,演示了如何使用el-dialog组件的loading属性来显示加载...