如何通过Vue实现图片的拖拽和缩放动画？

<template>  <div class="image-container">    @@##@@  </div></template><script>export default {  data() {    return {      imageUrl: 'path_to_your_image',  // 图片路径      isDragging: false,  // 是否正在拖拽      startX: 0,  // 开始拖拽时的横坐标      startY: 0,  // 开始拖拽时的纵坐标      currentX: 0,  // 当前的横坐标      currentY: 0,  // 当前的纵坐标      scale: 1  // 缩放比例    };  },  methods: {    handleMouseDown(event) {      event.preventDefault();      this.isDragging = true;      this.startX = event.clientX - this.currentX;      this.startY = event.clientY - this.currentY;      document.addEventListener('mousemove', this.handleMouseMove);      document.addEventListener('mouseup', this.handleMouseUp);    },    handleMouseMove(event) {      event.preventDefault();      if (this.isDragging) {        this.currentX = event.clientX - this.startX;        this.currentY = event.clientY - this.startY;        this.$refs.image.style.transform = `translate(${this.currentX}px,${this.currentY}px) scale(${this.scale})`;      }    },    handleMouseUp() {      this.isDragging = false;      document.removeEventListener('mousemove', this.handleMouseMove);      document.removeEventListener('mouseup', this.handleMouseUp);    },    handleTouchStart(event) {      event.preventDefault();      this.isDragging = true;      this.startX = event.changedTouches[0].clientX - this.currentX;      this.startY = event.changedTouches[0].clientY - this.currentY;      document.addEventListener('touchmove', this.handleTouchMove);      document.addEventListener('touchend', this.handleTouchEnd);    },    handleTouchMove(event) {      event.preventDefault();      if (this.isDragging) {        this.currentX = event.changedTouches[0].clientX - this.startX;        this.currentY = event.changedTouches[0].clientY - this.startY;        this.$refs.image.style.transform = `translate(${this.currentX}px,${this.currentY}px) scale(${this.scale})`;      }    },    handleTouchEnd() {      this.isDragging = false;      document.removeEventListener('touchmove', this.handleTouchMove);      document.removeEventListener('touchend', this.handleTouchEnd);    }  }};</script><style scoped>.image-container {  display: flex;  align-items: center;  justify-content: center;  height: 500px;  width: 500px;  overflow: hidden;}img {  user-select: none;  pointer-events: none;  max-width: 100%;  max-height: 100%;  transform-origin: 0 0;}</style>

template:...  <div class="zoom-container">    <button @click="handleZoomIn">Zoom In</button>    <button @click="handleZoomOut">Zoom Out</button>  </div>...methods:...  handleZoomIn() {    this.scale += 0.1;    this.$refs.image.style.transform = `translate(${this.currentX}px,${this.currentY}px) scale(${this.scale})`;  },  handleZoomOut() {    if (this.scale > 0.1) {      this.scale -= 0.1;      this.$refs.image.style.transform = `translate(${this.currentX}px,${this.currentY}px) scale(${this.scale})`;    }  }...