vue3和ts实现点击图片放大再次点击缩小

要实现点击图片放大再次点击缩小的效果，您可以结合Vue 3和TypeScript来实现。首先，您需要在Vue组件中定义一个数据属性来控制图片的放大与缩小。接下来，您可以使用`v-bind`指令绑定点击事件，并在事件处理程序中切换图片的大小状态。

以下是一个示例代码：

<template>
  <div>
    <img :src="imageUrl" :style="imageStyle" @click="toggleImageSize" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  data() {
    return {
      isImageLarge: false,
    };
  },
  computed: {
    imageUrl() {
      return this.isImageLarge ? '/path/to/large/image.jpg' : '/path/to/small/image.jpg';
    },
    imageStyle() {
      return {
        width: this.isImageLarge ? '400px' : '200px',
        height: 'auto',
        cursor: 'pointer',
      };
    },
  },
  methods: {
    toggleImageSize() {
      this.isImageLarge = !this.isImageLarge;
    },
  },
});
</script>

在上面的示例中，我们使用了`isImageLarge`属性来跟踪图片的大小状态，初始状态为小图。通过点击图片，`toggleImageSize`方法会在大图和小图之间进行切换，并更新图片的URL和样式。

请注意，示例中的路径仅作为示意，您需要根据实际情况替换为您的图片路径。此外，您还可以根据需要调整图片的大小和样式。

希望以上内容能对您有所帮助！如果您有任何疑问，请随时提问。