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

暂无

简述Object(ActiveX)控件遮挡Dialog、select下拉框的解决办法的更多相关文章

  1. 自定义SWT控件四之其它下拉框

    4.其它下拉框 4.1 添加联动二级多选择框(有添加按钮和删除按钮) package com.view.control.select; import java.util.ArrayList; impo ...

  2. GridControl控件绑定RepositoryItemImageComboBox 作为下拉框使用

    如果,时间长时了,已前做过的东西,都记不得了,所以记录一下. 废话不多说. 1.拖出gridview控件,然后将字段绑定上去 2.将要做下拉框的控件加入RepositoryItemImageCombo ...

  3. devpress GridControl控件绑定RepositoryItemImageComboBox 作为下拉框使用 zt

    1.拖出gridview控件,然后将字段绑定上去 2.将要做下拉框的控件加入RepositoryItemImageComboBox控件 3.绑定数据 ; i < ; i++) { //如果取值时 ...

  4. 安卓学习之--UI控件用法 单选 按钮 下拉框

    1.单选 .RadioGroup 可将各自不同的RadioButton ,设限于同一个Radio 按钮组,同一个RadioGroup 组里的按钮,只能做出单一选择(单选题). <RadioGro ...

  5. Android简易实战教程--第二十二话《自定义组合控件模拟qq登录下拉框和其中的一些”小技巧”》

    转载此文章请注明出处:点击打开链接   http://blog.csdn.net/qq_32059827/article/details/52313516 首先,很荣幸此专栏能被CSDN推荐到主页.荣 ...

  6. layui的select下拉框太长被遮挡了的解决办法

    layui的select下拉框太长采用滚动条的形式出现,可以给select的dl加一个最大高度,具体的效果如下图 .layui-form-select dl { max-height:160px; }

  7. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  8. jQuery操作select下拉框的text值和value值的方法

    1.jquery获取当前选中select的text值 $("#select1").find("option:selected").text(); 2.jquer ...

  9. jquery操作select下拉框的多种方法(选中,取值,赋值等)

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...

随机推荐

  1. window下,nodejs安装http-server,并开启HTTP服务器

    1.下载nodejs  官方下载地址:https://nodejs.org/en/ 2.在cmd命令中,输入node -v 输入出版本号,代表安装成功. 3.输入 npm install http-s ...

  2. 【C#-算法】根据生日自动计算年龄_DataTime 的 DateDiff 方法

    dateTimePicker1.Value出生日期控件的值 long BirthDay = DateAndTime.DateDiff(DateInterval.Year, dateTimePicker ...

  3. C# 父子窗体 传值

    子窗体 public event Action<List<DataGridViewRow>> myEvent; myEvent(List); 子窗体调用 父窗体 创建对象 fr ...

  4. @RequestParam和@PathVariable用法小结

    @RequestParam 使用@RequestParam接收前段参数比较方便,前端传参的URL: url = “${ctx}/main/mm/am/edit?Id=${Id}&name=${ ...

  5. 【LOJ2604】「NOIP2012」开车旅行

    [题目链接] [点击打开链接] [题目大意] 从西到东的坐标轴\([1,n]\)上有\(n\)个海拔互不相同的城市,每两个城市之间的距离定义为\(dis(i,j)=|h_i-h_j|\) 小\(A\) ...

  6. 使用keil生成bin文件

      相关文件  下载http://pan.baidu.com/share/link?shareid=478269&uk=1107426113 使用kei自带的工具的话是 打开Options f ...

  7. idea 下运行安卓项目

    修改 gralde 路径修改安卓sdk路径进入project structure 设置 Project settings / Project /project SDK 选择 Android API 2 ...

  8. spark MLlib 概念 2:Stratified sampling 层次抽样

    定义: In statistical surveys, when subpopulations within an overall population vary, it is advantageou ...

  9. EBS 页面影藏“关于此页”

    EBS环境: R12.1.3 问题:要影藏EBS登录页面左下角的“关于此页” 方法: 修改的配置文件参数:FND:诊断 , 由 是 改为 否 个性化自助定义 ,由 是 改为 否参数说明:‘FND:诊断 ...

  10. RF问题收集

    console中不打印日志 报错信息: 修改pop方法: try: result = result.decode('UTF-8') except UnicodeDecodeError: pass re ...