【element ui】问题集锦（el-dialog）

Beam
2,115 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

问题一：关闭弹窗时遮罩层异常

现象

正常设置后，有时点击没有关闭对话框，而是先亮了，然后再次点击才成功关闭对话框。

el-dialog相关属性

close-on-click-modal，是否可以通过点击 modal 关闭 Dialog，默认为true。

原因

弹出对话框后发现，el-dialog__wrapper被设置了margin-top，导致上面部分没有dialog遮罩。

因此，点击上半部分会出现，先亮屏幕再次点击才能关闭，点击下半部分正常关闭的现象。

结果

改margin-top为padding-top即可。

问题二：el-dialog获取其中的dom节点方法

存在对话框

<el-dialog :visible.sync="dialogVisible">
	<div id="devModel"></div>
</el-dialog>

问题代码

this.dialogVisible = true
let dom = document.getElementById('devModel')
console.log(dom) // 打印出dom为null

正确代码

this.dialogVisible = true
this.$nextTick(()=>{
	let dom = document.getElementById('devModel')
	console.log(dom)
})

必须使用nextTick，否则初次打开对话框时获取不到里面的dom节点。

问题三：双层el-dialog样式控制

关键代码

<html>
	<head>
		……
	</head>
	<body>
		<div class="dept">
			<el-dialog width="450px" :visible.sync="dialogVisible">
				<el-button v-model="deptBox.parentId" @click="innerVisible = true" >{{deptBox.parentName}}</el-button>
				<el-dialog width="400px" title="请选择上级部门" :visible.sync="innerVisible" append-to-body>
				</el-dialog>
			</el-dialog>
		</div>
	</body>
</html>

问题描述

通过设置.dept.el-dialog样式修改对话框样式，但是第二层对话框样式未正常设置，与第一层不一致。

在这里插入图片描述

原因

第二层dialog挂载到了body下，不在.dept样式控制下。

查询官方资料

append-to-body，Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true。

但是实验证明，若设置了append-to-body导致主题切换无法控制，不设置也没啥问题啊。

去掉append-to-body属性后，又出现如下问题：

明显的第二层没有高亮，需要点击鼠标才高亮。

在这里插入图片描述

修改代码，将两个el-dialog并列放置，不要嵌套其中即可。

最终代码如下：

<div class="dept">
	<el-dialog width="450px" :visible.sync="dialogVisible">
		<el-button v-model="deptBox.parentId" @click="innerVisible = true" >{{deptBox.parentName}}</el-button>
	</el-dialog>
	<el-dialog width="400px" title="请选择上级部门" :visible.sync="innerVisible">
	</el-dialog>
</div>

在这里插入图片描述

问题四：修改el-dialog动画导致在有threejs的页面闪动的问题

修改el-dialog动画代码如下：

/* dialog框显示和隐藏的动画效果 改浮现方式从左往右出现 */
@keyframes dialog-fade-in {
  0% {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}

现象：

平时用着好好的，突然有一天，在3D场景中使用弹出框，出问题了，闪屏啊。

就是那种从左往右滑到中间突然闪现一下重新滑动。

这……

定位：

1、查看点击事件只触发了一次

2、并没有触发关闭事件

3、:visible.sync="dialogVisible"监控dialogVisible也就只变化了一次变成了true

费解……

4、那我关了动画吧，注释掉以上，诶，好了。

5、然后我就疯狂找规律啥时候会出现闪屏呢，好像是threejs加载了很多动画以后就会出现，如果仅仅加载场景没有各种特效，弹出框是没有闪屏的。

这好像也说得通，因为threejs在不停渲染页面，而弹出框动画也有执行时间也在渲染界面，所以冲突了？

于是乎我修改弹出框的动画时间：

.el-dialog__wrapper {
  transition-duration: 3s;
}

果然出现了奇奇怪怪的现象，虽然也不能证明啥。

思考：

element-ui并未对外提供这个动画控制，所以……我不知道了，反正就是冲突了。

注释掉上述代码就行了，和threejs连用的el-dialog还是用默认的动画吧。

哎，记录一下，求大神解答……

avatar
文章
阅读
粉丝