vue实现点击图片放大显示功能

ゝ一纸荒年。 2022-11-17 13:53 264阅读 0赞

[https://blog.csdn.net/qq348843576/article/details/103261567][https_blog.csdn.net_qq348843576_article_details_103261567]

[https://blog.csdn.net/qq\_36320160/article/details/102175334][https_blog.csdn.net_qq_36320160_article_details_102175334]

父组件:

<template>
      <div>
    
    
    <img
        @click.self="showBigImage($event)"
        src="~@/assets/img/liaojiewt/202141.png"
        alt=""
    />
    //显示放大图片的组件
    <BigImg :visible="photoVisible" :url="bigImgUrl" @closeClick="()=>{photoVisible=false}"></BigImg>
      </div>
    </template>
    
    import BigImg from "./BigImg.vue";
    export default {
      data() {
        return {
          photoVisible: false,
          bigImgUrl: "",
         }
      },
      methods: {
      showBigImage(imgUrl) {//点击图片函数，点击后，把photoVisible设置成true
        if (imgUrl != "") {
          this.photoVisible = true;
          this.bigImgUrl = e.currentTarget.src;
        }
      },
      components: {
         BigImg,
      },
      }

子组件:

<template>
      <div v-show="visible" @click="closeClick" class="showPhoto">
        <img class="img" :src="url" alt="图片加载失败" />
      </div>
    </template>
     
    <script>
    export default {
      props: {
        url: {
          type: String,
          default: "",
        },
        visible: {
          type: Boolean,
          default: false,
        },
      },
      methods: {
        closeClick() {
          //子组件可以使用 $emit 触发父组件的自定义事件
          this.$emit("closeClick");
        },
      },
    };
    </script>
    <style lang="css" scoped>
    .showPhoto {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .showPhoto .img {
      display: block;
      margin: auto 0;
      max-width: 100%;
      text-align: center;
    }
    </style>

[https_blog.csdn.net_qq348843576_article_details_103261567]: https://blog.csdn.net/qq348843576/article/details/103261567
[https_blog.csdn.net_qq_36320160_article_details_102175334]: https://blog.csdn.net/qq_36320160/article/details/102175334