简述Object(ActiveX)控件遮挡Dialog、select下拉框的解决办法

1、背景

   最近在做项目的过程中,我们使用了Object控件,但是同时在上面写了一个select下拉框,因此每次点击下拉框的时候我们会发现,下拉框的部分内容被Object控件给遮挡了,
调查研究后发现,我们可以使用iFrame标签遮挡Object控件,具体代码如下:

2、基本使用

  • HTML
    //下拉框
    <div class="select">
        <el-select
          v-model="value"
        >
            <el-option
              v-for="item in item"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
        </el-select>
    </div>
    <div>
      <object :parentCaseData="caseData"></object>
    </div>
  • 效果图

  

3、解决方法

    • HTML
      //下拉框
      <div class="select">
          <el-select
            v-model="value
            filterable//自定义过滤事件必须加的属性  无过滤需求不需要写
            :filter-method="filterDoc"//select内自定义的过滤器  无过滤需求不需要写
            @change="clickDoc"
            @visible-change="visibleChange"//监控下拉框的显示隐藏
          >
              <el-option
                v-for="item in item"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
          </el-select>
      </div>
      <div>
        <object :parentCaseData="caseData"></object>
        <iframe
            style="position:absolute;100%;height:70%;left:0;bottom:0;transparent;"
            ref="iframe"
            frameborder="0"
            v-if="SelectVisible"
         ></iframe>
      </div>
  • Script
    • data
      SelectVisible: false
    • methods
      /**
       * [visibleChange  文书打印下拉框的显示隐藏]
       * @return {[type]} [description]
       */
        visibleChange(val) {
          this.docSelectVisible = val;
      },

4、遇到的问题

暂无

原文地址:https://www.cnblogs.com/wxh0929/p/11691595.html