vue使用element组件，当引入iframe后，有的组件点击蒙层不能关闭

vue中使用iframe遇到的问题

做项目用iframe引入了报表组件，条件查询用了elemet的el-cascader，打开el-cascader选中选项后点击空白地方不能关闭，

后面找到问题是iframe的层级比较高，点击的是iframe。
解决方法是给外层div设置定位和z-index;iframe设置定位和z-index,iframe的z-index比外层div小就行了。
高兴的解决了bug,但后面查出数据后，iframe滚动条失效了。此时外层div z-index比较高，鼠标滚动是滚动的外层div。
最后的解决方法思路是，加了一空白div ,当el-cascader显示时，空白div z-index比iframe高，这时点击的是空白div就能隐藏，当el-cascader隐藏时，空白div删除，这时iframe的z-index高，滚动的就是iframe。

样式

//外层div
.content-box {
	position: relative;
}

iframe {
	position: relative;
	z-index: 1;
}
// 空白div
.model {
	position: absolute;
	z-index: 2;
	height: 100%;
	width: 100%;
}

用@visible-change="visibleChange"判断el-cascader的显示隐藏，再v-if去控制空白div