vue实现点击图片放大

最新推荐文章于 2024-08-20 10:51:49 发布

原创最新推荐文章于 2024-08-20 10:51:49 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

这篇博客展示了如何在Vue.js中创建一个名为BigImg的组件，用于实现图片预览。通过点击图片，BigImg组件会在屏幕上显示全屏的图片，并提供关闭功能。点击关闭按钮或屏幕任意位置可以隐藏预览。该组件接受`url`和`visible`两个props，同时通过`$emit`触发父组件的事件来更新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在component新建一个文件，例如BigImg.vue，然后加入以下代码

<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.9);
  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>

2、在你用到放大的页面，

<template>
  <div>
          <img
          @click.self="showBigImage($event)"
          :src="pic"
          alt=""
        />

        <BigImg
          :visible="photoVisible"
          :url="bigImgUrl"
          @closeClick="
            () => {
              photoVisible = false;
            }
          "
        ></BigImg>
  </div>
</template>
import BigImg from "../../components/BigImg";  //引入
export default {
  data（）{
      bigImgUrl:"",
      photoVisible:false,
 }
  components: { //注册
    BigImg,
  },
  methods:{
   // 放大图片
    showBigImage(e) {
      //点击图片函数，点击后，把photoVisible设置成true
      if (e != "") {
        this.photoVisible = true;
        this.bigImgUrl = e.currentTarget.src;
      }
    },
  }
}