zoukankan      html  css  js  c++  java
  • 简述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、遇到的问题

    暂无

  • 相关阅读:
    ES5 ES6 作用域声明部分
    js 内建函数reduce
    $apply的使用与否
    得分-星星
    CSS3中translate、transform和translation的区别和联系
    vue 学习笔记
    -webkit-line-clamp 多行文字溢出...
    八位二进制数为什么表示范围(-128~~+127)理解
    vs2017_enterprise正式版离线安装包bt下载
    RSA密钥之C#格式与Java格式转换
  • 原文地址:https://www.cnblogs.com/wxh0929/p/11691595.html
Copyright © 2011-2022 走看看