vue3点击图片放大

在Vue3中，通过使用`v-model`、事件监听以及CSS样式调整来实现图片的点击放大功能，可以采用以下步骤：

1. 首先，在HTML上创建一个图片元素，并添加一个自定义属性用于绑定缩放状态：

<template>
  <div class="image-container">
    <img :src="imageUrl" @click="handleClick" :style="{ transform: 'scale(' + scale + ')' }" v-bind:class="{ zoomed: isZoomed }"/>
  </div>
</template>

2. 在Vue组件中，声明变量和方法：

<script setup>
import { ref } from 'vue';

const imageUrl = ref('path/to/image.jpg');
let isZoomed = ref(false);
let scale = ref(1);

function handleClick(e) {
  if (!isZoomed.value) {
    scale.value = 1.5; // 放大比例
    isZoomed.value = true;
  } else {
    scale.value = 1; // 缩小回原大小
    isZoomed.value = false;
  }
}
</script>

3. 定义一些样式，包括放大后的图片容器和鼠标悬停时的效果：

<style>
.image-container {
  position: relative;
  overflow: hidden;
}

.zoomed img {
  transition: transform 0.3s ease-in-out;
}

.zoomed:hover img {
  transform: scale(1.2);
}
</style>

当你点击图片时，如果当前不是放大状态，会将图片放大；再次点击则恢复原大小。此外，当鼠标悬停在放大后的图片上，会有更明显的放大效果。