element ui 预览图片的时候滚动鼠标放大缩小, 重新打开的时候恢复原来大小

<template>
<div>
<el-button @click="openPreview">预览图片</el-button>
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" :before-close="resetPreview">
<img ref="previewImage" :src="imageUrl" alt="预览图片" :style="{ transform: `scale(${zoomLevel / 100})` }">
</el-dialog>
</div>
</template>

<script>
export default {
data() {
return {
dialogVisible: false,
imageUrl: 'your-image-url.jpg',
zoomLevel: 100
};
},
methods: {
openPreview() {
this.dialogVisible = true;
},
resetPreview(done) {
this.zoomLevel = 100;
done();
},
handleImageWheel(event) {
event.preventDefault();
const delta = Math.max(-1, Math.min(1, (event.deltaY || -event.wheelDelta || event.detail)));
const zoomStep = 10;
if (delta > 0) {
// 放大图片
this.zoomLevel += zoomStep;
} else {
// 缩小图片
this.zoomLevel -= zoomStep;
}
// 根据缩放级别调整图片大小
this.$refs.previewImage.style.transform = `scale(${this.zoomLevel / 100})`;
}
}
};
</script>