如何在vue-panzoom中实现zoomIn和缩放

import VuePanzoom from 'vue-panzoom';

export default {
  components: {
    VuePanzoom
  },
  // ...
}

<template>
  <div>
    <vue-panzoom
      :zoom="zoom"
      :min-zoom="minZoom"
      :max-zoom="maxZoom"
      @zoom-change="handleZoomChange"
    >
      <!-- 内容区域 -->
    </vue-panzoom>
    <button @click="zoomIn">Zoom In</button>
    <button @click="zoomOut">Zoom Out</button>
  </div>
</template>

export default {
  data() {
    return {
      zoom: 1, // 初始缩放比例
      minZoom: 0.5, // 最小缩放比例
      maxZoom: 2 // 最大缩放比例
    };
  },
  methods: {
    zoomIn() {
      this.zoom += 0.1; // 增加缩放比例
    },
    zoomOut() {
      this.zoom -= 0.1; // 减小缩放比例
    },
    handleZoomChange(newZoom) {
      this.zoom = newZoom; // 更新缩放比例
    }
  }
}