vue实现点击图片放大

这篇博客展示了如何在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;
      }
    },
  }
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值