elementUI同一页面展示多个Dialog的实现

要实现的效果如下：

首先官方文档是这样描述的：

但是我写了个小demo发现并不能直接平级放置即可，一样会存在先后顺序不同造成的覆盖以及遮罩层导致不能点击被遮盖的dialog。

原因如下：因为dialog先后顺序不同z-index设置的层级不同，所以必定会覆盖遮挡

那么我们要实现一个这样的效果不仅仅平级放置即可，就要用到里面的一个属性：modal

下面贴上代码：

总的思路就是：dialog先后顺序重叠问题，使用便宜去让它们错开；然后就是遮罩层导致不能点击z-index层级低的弹框，就要用到modal去关闭z-index层级高的遮罩层。（还可以额外使用close-on-click-modal来取消通过点击 modal 关闭 Dialog）

到此这篇关于elementUI同一页面展示多个Dialog的实现的文章就介绍到这了,更多相关elementUI多Dialog内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo

    调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- import CSS --> <link rel="stylesheet" href="https://u

  • 基于element-ui对话框el-dialog初始化的校验问题解决

    不刷新页面重新打开el-dialog时,如果我们绑定了rules或者某个值需要required,它总会自动校验. 查看了多个博文,发现常用的有两种解决方法(下列方法都可以在其他博文查看,不再细写,如有需要请自行查询): 1.给dialog套上v-if : 2.在关闭dialog时,监听关闭回调,清除校验. 我在自己的项目里使用了上述两种方法,都不太好用,自己琢磨出了另一种方法: <el-dialog @open="openDialog()"> </el-dialog&

  • element-ui中dialog弹窗关闭按钮失效的解决

    如下所示: <el-dialog title="修改库存" :visible.sync="kcDialog" @close="kcDialog = false"> ... </el-dialog> 加一个@close可以是一个方法或者直接操作kcDialog为false 补充知识:webpack外部扩展,依赖前置 引入了外部js index.html <script src="https://code.jq

  • Element Dialog对话框的使用示例

    组件- 对话框 基本用法 <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"

  • elementui更改el-dialog关闭按钮的图标d的示例代码

    先给大家展示效果图: 先上图 <el-dialog title="对话框" :visible="true" @close="关闭事件()" @opened="打开事件()" class="想来点其他样式"> 主要是添加一下样式 .el-dialog__headerbtn { top: 8px !important; background: url('https://你路径资源的url图片') l

  • element ui里dialog关闭后清除验证条件方法

    关闭dialog触发事件 //vue <!--添加用户dialog begin--> <el-dialog title="编辑用户" :visible.sync="dialogFormVisible" custom-class="editDialog" :close-on-click-modal="false" :before-close = "cleanContent" :show-cl

  • element ui 对话框el-dialog关闭事件详解

    通常会有需求,在关闭弹框后需要清空填写的数据,这时候就需要关闭事件了 <el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'> </el-dialog> 在标签中加入@close='closeDialog' mothods中加入 //关闭弹框的事件 closeDialog(){ this.xxx = '';//清空数据 },

  • elementUI同一页面展示多个Dialog的实现

    elementUI同一页面展示多个Dialog的实现

    要实现的效果如下: 首先官方文档是这样描述的: 但是我写了个小demo发现并不能直接平级放置即可,一样会存在先后顺序不同造成的覆盖以及遮罩层导致不能点击被遮盖的dialog. 原因如下:因为dialog先后顺序不同z-index设置的层级不同,所以必定会覆盖遮挡 那么我们要实现一个这样的效果不仅仅平级放置即可,就要用到里面的一个属性:modal 下面贴上代码: 总的思路就是:dialog先后顺序重叠问题,使用便宜去让它们错开:然后就是遮罩层导致不能点击z-index层级低的弹框,就要用到moda

  • ElementUI嵌套页面及关联增删查改实现示例

    ElementUI嵌套页面及关联增删查改实现示例

    目录 前言 一.ElementUI如何在原有页面添加另外一个页面并实现关联增删查改? 二.实现步骤 前言 本文大概内容:例如:随着ElementUI前后端交互的技术的更新,用户的的体验越来越好.本文主要针对用户在保持原页面结构,再添加另一个页面,并可以按需要调整两个页面之间的比例大小. 一.ElementUI如何在原有页面添加另外一个页面并实现关联增删查改? 示例:如下图,我们在原来页面增删查改及基础上,选中某一行,点击该公司后,直接在该页面展示关联的所有企业客户的页面,并且实现查询.批量删除.

  • Vue使用Element-UI生成并展示表头序号的方法

    目录 前言 生成序号 使用序号 自定义序号 注意 前言 序号算是在展示数据的时候,一种很普遍的属性了,我们可以自己写生成序号的规则,也可以借助第三方. 这里我选择后者,使用Element-UI自带的一个table属性,去生成并展示需要 首先看下我的页面,是没有序号的,这样看起来有点凌乱,缺少什么东西一样. 生成序号 在Element-UI官网中的table的众多demo下,有这么一个demo: 我们可以利用里面的代码,生成序号,demo里面的代码比较长,我把核心代码抽取出来了,如下: <el-t

  • 基于javascript的JSON格式页面展示美化方法

    {"name": "monkey","age": "24","height": 164.0} 如果想让以上json字符串在页面上展示的比较易读,即变成下面的style: { "name": "monkey", "age": "24", "height": 164.0cm } 本文介绍的方法基于javascri

  • Flask使用Pyecharts在单个页面展示多个图表的方法

    Flask使用Pyecharts在单个页面展示多个图表的方法

    在Flask页面展示echarts,主要有两种方法: 方法1.原生echarts方法 自己在前端引入echarts.js文件.自己创建div.自己初始化echarts对象.自己从官网复制并且配置图表.自己给echarts对象设置配置项实现绘制,这种方法的缺点是配置项都是js的形式比较繁琐,对于后端开发人员来说有点过于参与前端js部分的配置开发: 这种方式参照echarts官网的方式,其实跟flask没有多大关系,php/java不同后端语言都一样,地址 方法2:使用pyecharts pyech

  • vuex+axios+element-ui实现页面请求loading操作示例

    本文实例讲述了vuex+axios+element-ui实现页面请求loading操作.分享给大家供大家参考,具体如下: 前言 我们在平常写项目的时候,发请求的时候肯定会习惯用一个 loading 遮罩层来防止用户在没拿到数据之前误操作 如果是页面同时只发送一个请求,那么无论是在组件中或者是在 axios 插件中进行请求和响应拦截都可以做到 但是,当一个页面同时要发送多个请求的时候,这么做显然就不行了 因为最先完成的请求会把所有请求的 loading 都给关闭 举个例子,第一个请求的响应时间为

  • element-ui中页面缩放时table表格内容错位的解决

    element-ui中页面缩放时table表格内容错位的解决

    目录 element-ui 页面缩放时table表格内容错位 element-ui表格优化--显示错位问题 element-ui 页面缩放时table表格内容错位 当table内容较多的时候, 横向拉动浏览器界面.最后一列自定义按钮,就会出现上下错误的情况. 解决办法: this.$refs.table.doLayout(); table增加ref属性. mounted() { window.addEventListener('resize', this.handleResize); } met

  • Vue+elementUI实现动态展示列表的数据

    Vue+elementUI实现动态展示列表的数据

    目录 Vue elementUI动态展示列表的数据 需求描述 Vue elementUI注意事项 多选框对应List<object> 输入框判断条件 自定义弹窗格式 Vue elementUI动态展示列表的数据 需求描述 活动查看的时候,根据后台返回的数据,动态渲染列和每行数据. 后台返回的数据结构如下 html <!-- 弹出的查看数据 --> <el-dialog width="1200px" :title="activityName&quo

  • Django实现将views.py中的数据传递到前端html页面,并展示

    自学Django已经有一周啦,想把自己自学过程中的每一步都记录下来,给一些零基自学Django的战友们一些参考:本次主要内容为,用一个实例展现views.py中的数据是如何传递到html页面,并在页面中展示. 我的项目已经创建好,我的app为song03apptest.因为我的项目和环境的相关配置已经配置好,如果是第一天开始学习Django的童鞋,请先看我的入门教程,第一个Django实例. 本文重点在于用实例来说明views和html前台页面的传递. 1.打开我的app,song03appte

  • vue引入elementUi后打开页面报错Uncaught TypeError的解决方式

    vue引入elementUi后打开页面报错Uncaught TypeError的解决方式

    vue引入elementUi后打开页面报错 本人在用idea创建vue项目并引入elemenUi之后网页报错:Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype’). 百度了很多办法都说是因为在vue3中引入了elementUi,vue3.0之后是不支持elementUi的,要使用element plus,但是因为我想用若依偷懒,所以必须得用elementUi,很多文章说是vue - V命令查看vu

随机推荐