用IFrame解决Div显示优先级问题

在页面中，由于优先级问题，导致一下弹窗无法在页面中显示。例如使用ocx播放组件，ocx组件的优先级在页面是很高的，导致我页面的弹窗无法显示在上面，因此可以用点小技巧来处理这个问题。

解决办法就是：给层中放一个优先级更高的元素（iframe），具体解决代码如下：

1、处理dialog弹窗类型。内容是直接在页面代码中写出来的

<el-dialog title="弹窗" width="520px" :visible="true" @close="closeDialog" :close-on-click-modal="false">
　<!-- 省略其他代码-->
   <iframe src="about:blank" class="iframeCss" frameBorder="0" marginHeight="0" marginWidth="0"></iframe>

</el-dialog>

2、处理动态生成的组件，例如：时间下拉弹窗，下拉弹出的面板是根据代码自动生成的，不能直接在页面中找到对应的内容，则需要另外处理

 无效方法：因为时间选择面板是动态生成，拼接到html代码尾部，因为iframe并没有插入成功。

 <el-date-picker v-model="value3" type="datetime" size="mini" default-time="12:00:00" style=" 280px;">
 　　<iframe src="about:blank" class="iframeCss" frameborder="0" marginheight="0" marginwidth="0"></iframe>
 </el-date-picker>

目前解决方案：（待优化做法）

1、当时间输入框获取焦点时，触发事件。新建一个iframe元素，插入到时间面板上；

2、由于只需要插入一次即可，因此可以使用方法this.$once()进行调用；

PS：以下代码仅供参考思路

html

<el-date-picker @focus="handleFocus" v-model="value3" type="datetime" size="mini" default-time="12:00:00" style=" 280px;"></el-date-picker>

script

export default {
    created() {
        this.$once('appendFrame', () => {
            this.append()
        })
    },
    method:{
    　handleFocus() {
       this.$emit("appendFrame");
     },
     append() {
　　　　　this.$nextTick(() => {
        　　const panel = document.querySelector(".el-picker-panel");　　// .el-picker-panel是时间弹窗面板的css样式
　　        const iframe = document.createElement("iframe");
　　        iframe.src = "about:blank";
　　        iframe.className = 'iframeCss'
　　        iframe.frameBorder = 0;
　　        iframe.marginHeight = 0;
　　        iframe.marginWidth = 0;
　　        panel.appendChild(iframe);
       });
　　 }
  }
}    

ifream的css样式。

.iframeCss {
  position: absolute;
  visibility: inherit;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: alpha(opacity=0);
}