Cropper 图片裁剪

Cropper 图片裁剪 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { Cropper } from "@/components/page/cropper";

const demoProps = { imgLink: "/notData.png" };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <Cropper v-bind="demoProps"></Cropper>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { Cropper } from "@/components/page/cropper";

Props

参数	说明	类型	默认值	必填
imgLink	图片链接	string	""	否
imageType	图片类型	"blob" | "base64"	"blob"	否
cropWidth	截图框宽度	number	200	否
cropHeight	截图框高度	number	200	否
cropContainerHeight	截图容器高度	number	350	否

Events

事件名	说明	回调参数
uploadImage	图片上传回调	formData: FormData
imgMoving	图片移动事件	-
cropMoving	图片剪切事件	-

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
Cropper	导出 Cropper 供业务侧复用。	useInstall(index)

Types

CropperProps

导出 CropperProps 供业务侧复用。

字段	说明	类型	默认值	必填
imgLink	图片链接	string	-	否
imageType	图片类型	"blob" | "base64"	-	否
cropWidth	截图框宽度	number	-	否
cropHeight	截图框高度	number	-	否
cropContainerHeight	截图容器高度	number	-	否

CropperEmitProps

导出 CropperEmitProps 供业务侧复用。

字段	说明	类型	默认值	必填
uploadImage	图片上传回调	[formData: FormData]	-	是
imgMoving	图片移动事件	[]	-	是
cropMoving	图片剪切事件	[]	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。