vue解决弹出图片显示在弹框下方

问题来源

在写前端vue项目时，在用到ele的 el-image 这个组件时，有时会出现图片显示在弹框即dialog下面，后面发现是因为el-image组件，默认的z-index是2000。
后来我将这个z-index设置了一个较大的值，但是还会出现显示在弹框下面。

继续找问题，接着发现我是用的dialog打开了另外第2个dialog，在第2个dialog中打开el-image这个标签。

问题分析

通常会在dialog里加入append-to-body 这个属性，来确保第2个dialog不会被遮盖住，这时候element会自动的计算z-index，所以el-image也需要进行实时的更新，而不能是一个定值。
有了这个分析后，就好解决了。

解决方法

• 引入 import { PopupManager } from 'element-ui/lib/utils/popup'
• 在data()中定义一个变量imageZindex:2040
• 在method()方法中，新增一个方法

	getZindex(){
	   this.$nextTick(() =>{
	     this.imageZindex = PopupManager.nextZIndex();
	   })
	}

• 最好是在监听中调用getZindex()方法，或者在mounted()方法中调用。
• 将imageZindex定义到标签中<el-image : z-index=” imageZindex”>

至于为什么使用 this.$nextTick 这个方法，是因为

希望将回调延迟到下次 DOM 更新循环之后执行。