博客

网上有很多关于vue点击图片放大的方法，我是根据自己使用的情况进行制作的，我这种情况是点击iframe标签中图片进行放大的。

话不多说咱直接上代码，走你

父组件：

<template>
  <div class="iframeBody">
    <!-- 标题 -->
    <el-row>
      <el-col :span="24" class="iframeTitle">
        <h1>{{ navigationTitle }}</h1>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="iframeBox">
        <el-col :span="24" style="display: flex; justify-content: center">
          <!-- iframe标签显示外部页面 -->
          <iframe
            ref="iframeHtml"
            id="iframeHtml"
            style="font-family: Microsoft YaHei; background-color: #ffffff"
            :src="iframeHtml"
            frameborder="0"
            scrolling="auto"
            width="90%"
          ></iframe>
        </el-col>
      </el-col>
    </el-row>
    <!-- 放大图片 -->
    //此部分是你需要的代码
    <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
  </div>
</template>
<script>
import BigImg from "./BigImg.vue"; //引入子组件
export default {
  name: "OutsideManualSub",
  components: { "big-img": BigImg }, //对子组件进行封装加以使用
  data() {
    return {
      navigationTitle: "", //标题
      iframeHtml: "", //iframe显示内容地址
      imgSrc: "", //向子组件传输图片的地址
      showImg: false, //子组件显示条件
    };
  },
  created() {
    this.getHTML();
  },
  mounted() {
    // 必须在iframe标签onload事件前进行this指向，否则调用data中的值无效显示undefined
    let that = this;
    document.getElementById("iframeHtml").onload = function () {
      // 获取iframe中的document内容，进行操作
      let iframe =
        window.top.document.getElementById("iframeHtml").contentWindow.document;
      // 获取iframe html文件head头部标签
      const head = iframe.getElementsByTagName("head");
      // 新建link标签
      const linkTag = document.createElement("link");
      const linkTag1 = document.createElement("link");
      // link标签引入css文件的地址
      linkTag.href = "../topics/css/topic-body.css";
      linkTag1.href = "../topics/css/commonltr.css";
      // 设置link标签属性
      linkTag.setAttribute("rel", "stylesheet");
      linkTag1.setAttribute("rel", "stylesheet");
      // 设置link标签属性
      linkTag.setAttribute("type", "text/css");
      linkTag1.setAttribute("type", "text/css");
      // 将link标签添加进iframe html文件的head里
      head[0].appendChild(linkTag);
      head[0].appendChild(linkTag1);
      // 通过getElementsByTagName()方法获取全部img标签
      let label = iframe.getElementsByTagName("img");
      //因为是点击iframe标签中图片进行放大的，所以需要用到for循环
      // label中不只有img标签，使用for...in...循环是不可行的，需要使用原本的for循环，通过img标签的数量进行循环，过滤得到纯纯的img标签
      for (let i = 0; i < label.length; i++) {
        // 点击img标签进行方法操作
        label[i].onclick = function () {
          // 调用ShowBigImg()方法
          that.ShowBigImg(label[i].src);
        };
      }
    };
  },
  methods: {
    getHTML() {
      let baseUrl = this.axios.defaults.baseURL; //接口前缀
      // 标题
      this.navigationTitle =
        this.$route.query.manualName + " > " + this.$route.query.urlName;
      let url = this.$route.query.url;
      this.iframeHtml = baseUrl + url;
    },
    // 打开遮罩层并显示图片
    ShowBigImg(src) {
      // 展示遮罩层
      this.showImg = true;
      // 传输img标签的图片地址
      this.imgSrc = src;
    },
    // 关闭遮罩层
    viewImg() {
      this.showImg = false;
    },
  },
};
</script>

子组件（子组件你可以全部拿过去使用，记得在父组件引用）：

<template>
  <!-- 过渡动画 -->
  <transition name="fade-enter-active">
    <div class="img-view" @click="bigImg">
      <!-- 遮罩层 -->
      <div class="img-layer"></div>
      <div class="img" style="margin-top: -63em">
        <!-- 图片 -->
        <img :src="imgSrc" />
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "BigImg",
  props: ["imgSrc"], //接受图片地址
  data() {
    return {};
  },
  methods: {
    bigImg() {
      // 发送事件
      this.$emit("clickit");
    },
  },
};
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s linear;
  transform: translate3D(0, 0, 0);
}
.fade-enter,
.fade-leave-active {
  transform: translate3D(100%, 0, 0);
}

/* bigimg */
.img-view {
  position: inherit;
  width: 100%;
  height: 100%;
}
/*遮罩层样式*/
.img-view .img-layer {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/*不限制图片大小，实现居中*/
.img-view .img img {
  max-width: 100%;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1000;
  margin-top: 10rem;
}
</style>