vue3-cropper 文档

vue3-cropper 是一个基于 Vue.js 3 的图片裁剪组件，它允许用户在网页中方便地实现图片的裁剪功能。该组件支持多种裁剪模式、比例尺和自定义配置项，适用于需要图片裁剪功能的应用场景。

使用 vue3-cropper 基本步骤如下：

1. 安装组件：可以通过 npm 或 yarn 将 vue3-cropper 添加到你的项目依赖中。

   npm install vue3-cropper --save
   # 或者
   yarn add vue3-cropper

2. 引入组件：在你的 Vue 项目中引入 vue3-cropper 并在组件中使用它。

   import { createApp } from 'vue';
   import App from './App.vue';
   import Vue3Cropper from 'vue3-cropper';

   const app = createApp(App);
   app.use(Vue3Cropper);
   app.mount('#app');

3. 使用组件：在你的 Vue 组件模板中使用 <vue3-cropper> 标签，并配置必要的属性和事件。

   <template>
     <vue3-cropper 
       src="图片地址"
       @done="handleCrop"
       @error="handleError"
       :outputSize="{ width: 300, height: 300 }"
     />
   </template>

   <script setup>
   import { ref } from 'vue';

   const handleCrop = (croppedData) => {
     console.log(croppedData);
   };

   const handleError = (error) => {
     console.error(error);
   };
   </script>

4. 配置选项：根据需要对 vue3-cropper 进行配置，包括设置裁剪框的大小、形状、比例、输出尺寸等。

请注意，组件的最新用法和配置项请查阅官方文档，因为组件可能会随着版本更新而发生变化。