正文

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

IP云
IP云V管理员/0 阅读
08/27
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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;width: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、遇到的问题

暂无