vue3鼠标悬浮时图片放大一些

在Vue3中，你可以通过CSS和JavaScript结合来实现图片在鼠标悬停时的放大效果。以下是一个简单的示例：

1. 首先，在HTML中创建一个<img>标签，并给它一个数据属性`@mouseover`和`@mouseout`，这将触发事件监听：

<template>
  <div class="image-container">
    <img :src="imageUrl" @mouseover="onHover" @mouseout="onLeave" alt="图片描述" :style="{ transform: scale }"/>
  </div>
</template>

2. 然后，在script部分中定义`scale`变量和对应的事件处理函数：

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

const imageUrl = 'your-image-url';
let scaleRef = ref(1);

function onHover() {
  scaleRef.value += 0.1; // 图片放大0.1倍
}

function onLeave() {
  if (scaleRef.value > 1) {
    scaleRef.value = 1; // 如果超过一倍原始大小，则还原
  } else {
    scaleRef.value -= 0.1; // 否则缩小0.1倍
  }
}
</script>

3. 在CSS中设置默认样式以及hover状态下的变换：

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

img {
  width: 100%;
  transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
}

img:hover {
  transform: scale(scaleRef.value); /* 当鼠标悬停时，应用缩放比例 */
}