Vue-Cropper如何监听缩放变化事件？

Vue-Cropper是一个基于HTML5 Canvas的裁剪组件库，它允许你在Vue应用程序中轻松实现图片裁剪功能。要监听Vue-Cropper的缩放变化事件，你需要使用其提供的API和`@crop-scale-change`指令。

首先，在你的Vue组件中安装并引入Vue-Cropper：

npm install vue-cropper

然后，在模板文件`.vue`中使用组件，并绑定`@crop-scale-change`事件：

<template>
  <vueCropper ref="cropper" :image-url="imageUrl" @crop-scale-change="handleScaleChange"></vueCropper>
</template>

<script>
import { VueCropper } from 'vue-cropper';

export default {
  components: {
    VueCropper,
  },
  methods: {
    handleScaleChange(scale) {
      console.log('缩放比例发生了改变:', scale);
      // 在这里处理缩放事件，比如更新状态、发送数据等
    },
  },
  data() {
    return {
      imageUrl: 'your-image-url', // 图片URL
    };
  },
};
</script>

在这个例子中，每当用户调整裁剪区域的缩放比例时，`handleScaleChange`函数会被调用，并传入新的缩放值。你可以根据需要在此处编写相应的业务逻辑。