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

暂无