多选框获取数据和输入框提交信息-pdf在IE中被遮盖

多选框获取数据和输入框提交信息-pdf在IE中被遮盖

图例

结构

 <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="640px"
      height="472px"
      :center="true"
      :lock-scroll="false"
    >
      <template v-slot:title>
        <div class="tit">{{title}}</div>
      </template>
      
      <div class="spa">分类选择</div>
      <div class="spa-k">
        <el-checkbox-group v-model="value" @change="onChange">
          <template v-for="(item,index) in faq_class_all">
            <el-checkbox :label="item.id">{{item.name.slice(16)}}</el-checkbox>
          </template>
        </el-checkbox-group>
      </div>
     
      <div class="spb">内容描述</div>
      <el-input
        type="textarea"
        :rows="10"
        placeholder="请详述您想咨询的问题，客服将为您联系对口服务~"
        v-model="textarea"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getLegal">
          <span>咨询客服</span>
        </el-button>
      </span>
     // 比z-index权重更高   解决pdf在iE中被遮盖的问题
      <iframe class="cover1" src="about:blank"></iframe>
    </el-dialog>

遮盖图例

数据

 data() {
    return {
      dialogVisible: false,
      textarea: '',
      legalList: [],
      faq_class_all: '',
      value: []
    }
  },
 created() {
    //this.getFAQClass()
  },

方法

  methods: {
    async getFAQClass() {
      let res = await this.$http.get('/cms/public/class?id=15')
      this.faq_class_all = res.result
    },

    async getLegal() {
      try {
        //if (this.value.length == 0 || !this.textarea) {
        if (!this.textarea) {
          this.$message.error('请填写完整咨询信息', 2.0)
        } else {
          let res = await this.$http.post('consulting', {
            question: this.textarea,
            //class_id: this.value.join('|')
          })
          if (typeof res.result !== 'undefined') {
            this.$message.success('您的问题咨询已成功提交', 2.0)
          }
          this.textarea = ''
          this.value = []
          this.dialogVisible = false
        }
      } catch (err) {
        throw new Error(err)
      }
    },
    onChange(checkedValues) {
      console.log('checked = ', checkedValues)
      console.log(`${checkedValues}`)
      console.log('value = ', this.value)
    }
  }

样式

.cover1 {
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
/deep/.el-dialog--center .el-dialog__body {
  // text-align: initial;
  text-align: left;
  padding: 25px 40px 30px;
}
.el-dialog--center .el-dialog__footer {
  text-align: center;
}
.tit {
  font-family: PingFangSC;
  font-size: 30px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  line-height: 40px;
}
.spa {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #333333;
  letter-spacing: 0;
  line-height: 30px;
  margin-bottom: 8px;
  // margin-left: 15px;
}
.spa-k {
  // margin-left: 15px;
}
.el-checkbox {
  margin-bottom: 15px;
}
.spb {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #333333;
  letter-spacing: 0;
  line-height: 30px;
  margin-bottom: 8px;
  margin-top: 5px;
  // margin-left: 15px;
}
.el-input {
  background: #ffffff;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  border-radius: 3px;
  // margin-left: 15px;
  // width: 560px;
  // height: 240px;
  color: #0084ff;
  border-radius: 4px;
}
/deep/.el-textarea__inner {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(170, 170, 170, 1);
  line-height: 22px;
}
.el-button {
  background: #0084ff;
  border-radius: 3px;
  border-radius: 3px;
  width: 180px;
  height: 44px;

  span {
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
  }
}
.el-button:hover {
  background: #409eff;
}