解决办法:给el-dialog标签加: :modal-append-to-body="false" 即可解决; 不过我还是不理解问题,如果我只是写一个test 页面,是不会出现这种问题的; 但是在实际项目中应用的时候却发生了这种问题; 记录一下
进而导致 vue 这边根据 vnode 的结构渲染新的元素的时候, 出现异常 解决的方式, 不要将 dialog 放置于可能新增元素的节点 后面, 另外用例中 将 dialog 放置于循环中 本来也是一个问题 如果appendToBody 配置为false会怎么样? 点击了 dialog 之后, 可以看到对应的 wrapper 的 div 依然还是在原来的 dom 层级上面 ...
画重点:一定要父级el-dialog、子级el-dialog同时加上 含义: modal-append-to-body遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上 append-to-bodyDialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true ...
当点击显示非模态对话框时,将el-dialog中的modal设置为false,不显示遮罩层, title=“非模态框 " :visible.sync=“showNoModal” width=“30%” :modal=false :close-on-click-modal=false :modal-append-to-body=false如图所示: 对话框并没有在预期的位置出现,它并没有处于父级div中,并且无法点击右侧div中...
文档解释:翻译成大白话就是,若el-dialog弹出框设置了modal-append-to-body='true'(默认)属性,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级),知道这个原理就好办了。 问题分析:经过分析源代码可得,el-dialog的显示层和遮罩层都设置了position:fixed,当然显示层的z-index肯定要比遮罩层的大...
element-ui中el-dialog弹窗嵌套modal遮罩层遮住父级元素 来源参考:https://wenku.baidu.com/view/08efa7d4730abb68a98271fe910ef12d2bf9a947.html 给父el-dialog和子el-dialog均加上以下两个属性 :modal-append-to-body="false" append-to-body
appendToBody: {//Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 truetype: Boolean,default:true}, modalAppendToBody: {//遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上type: Boolean,default:true}, ...
简介: element-ui框架的el-dialog弹出框被遮罩层遮挡问题 如图: 可以发现el-dialog 组件显示的时候被遮罩层挡住了 解决方案: 给el-dialog组件代码加上: :modal-append-to-body="false" 即可正常显示:关键词: UI框架 UI遮挡 UI el-dialog UI框架el-dialog UI框架el-dialog遮罩层 ...
如果需要在一个 Dialog 内部嵌套另一个 Dialog,需要使用 append-to-body 属性。 <template><el-dialogwidth="200px"top="50px":close-on-click-modal="false":title="$t('selectToExport')"custom-class="dialog":before-close="handleClose"><divstyle="padding: 20px 20px 20px 11px"><divclass="tem...
在element-ui中调用消息可以使用this.$message这种格式调用,但dialog却只能写在模板中,两者的代码如下 // 使用$message const h = this.$createElement; this.$message({ message: h('p', null, [ h('span', null, '内容可以是 '), h('i', { style: 'color: teal' }, 'VNode') ]) }); 当...