src/views/basic/askTestQuestion/components/analysisDialog.vue

<template>
  <el-dialog
    :visible.sync="visible"
    width="50%"
    :before-close="handleClose"
    :modal-append-to-body="false"
  >
    <div class="test-box" v-if="analysisUrl">
      <iframe
        :src="analysisUrl"
        ref="iframe"
        @load="onIFrameLoad()"
        style="width: 100%; border: none; max-height: 600px; /* 启用点击穿透 */"
      ></iframe>
    </div>
    <span slot="title" class="title"> 题目解析 </span>
  </el-dialog>
</template>
<script>
export default {
  name: "analysisDialog",
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      },
    },
    analysisUrl: {
      // 科目
      type: String,
      default() {
        return null;
      },
    },
  },
  data() {
    return {};
  },
  watch: {
    visible(val) {
      if (val) {
        console.log(val);
      } else {
        this.handleClose();
      }
    },
  },
  methods: {
    /** 按钮 - 取消 */
    handleClose() {
      this.$emit("update:visible", false);
    },
    onIFrameLoad() {
      const iframeRef = this.$refs.iframe; // 获取对应的 iframe
      const doc = iframeRef.contentDocument || iframeRef.contentWindow.document;
      const body = iframeRef.contentWindow.document.body;
      // body.style.overflowX = "hidden"; // 不允许出现横向滚动条
      const height = body.offsetHeight; // 获取内容的高度
      iframeRef.style.height = `${height + 40}px`; // 设置 iframe 的高度
      // 获取第一个P标签
      const firstP = doc.getElementsByTagName("p")[0];
      // 或者修改第一个 < p > 标签的内容;
      if (firstP) {
        let a = this.processString(firstP.innerHTML);
        firstP.innerHTML = a;
      }
    },
    processString(input) {
      // 正则表达式：匹配最多三位数字
      const regex = /^(\d{1,3})/;
      // 测试字符串是否以数字开头
      const match = input.match(regex);
      if (match) {
        // 如果匹配，去掉开头的数字并返回剩余部分
        return input.substring(match[0].length + 1).trim();
      }
      // 如果没有匹配，直接返回原字符串
      return input;
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  font-weight: 600;
}
.test-box {
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
}
</style>