vue3 + ts语法糖表示一个.tiff格式的图片鼠标滚轮放大缩小, 详细代码

在Vue 3中，结合TypeScript使用v-model和Vue的自定义事件可以实现图片滚动缩放的功能。这里我们假设已经安装了`vue2-image-zoom`这个库来处理图片的缩放。首先，需要安装依赖：

npm install vue2-image-zoom

然后在组件中引入并使用它：

<template>
  <div class="image-container">
    <img :src="src" ref="zoomImage" @wheel="handleWheelZoom" />
    <zoom-image :zoom-enabled="true" :ratio="zoomRatio" ref="zoomImgRef" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Ref } from 'vue';
import ZoomImage from 'vue2-image-zoom';

@Component({
  components: {
    ZoomImage,
  },
})
export default class ImageZoomComponent extends Vue {
  // 图片源
  @Prop() src: string;

  // 初始化缩放比例
  zoomRatio = 1;

  // 图片元素引用
  private readonly zoomImageRef: Ref<HTMLImageElement>;

  // 初始化ref
  mounted() {
    this.zoomImageRef = this.$refs['zoomImage'];
  }

  // 鼠标滚轮事件处理函数
  handleWheelZoom(e) {
    const delta = e.deltaY; // 滚动增量

    if (delta > 0) { // 放大
      this.zoomRatio += 0.1;
    } else if (delta < 0) { // 缩小
      this.zoomRatio -= 0.1;
    }

    // 更新图片尺寸，确保图片不会超出容器大小
    const imgWidth = this.zoomImageRef.value.naturalWidth * this.zoomRatio;
    const imgHeight = this.zoomImageRef.value.naturalHeight * this.zoomRatio;
    this.$refs['zoomImgRef'].updateZoom(imgWidth, imgHeight);
  }
}
</script>

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

在这个例子中，`@wheel="handleWheelZoom"`绑定了一个自定义的`handleWheelZoom`方法来响应鼠标滚轮事件。每次滚动时，会计算新的缩放比例，并通过`updateZoom`方法更新`zoom-image`组件中的图片显示。

注意这只是一个基础示例，实际应用中可能需要添加更多的错误处理和边界检查。此外，`.tiff`格式的图片支持可能取决于浏览器，一些现代浏览器对`.tiff`的支持并不像`.jpg`或`.png`那样广泛。