From 26892f7a7e27ea0530ae29f4422faff9d2777ee9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Wed, 4 Jun 2025 16:14:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(RenderCropper):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E5=92=8C=E8=A3=81=E5=89=AA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 beforeUpload 方法，支持文件预处理
- 修改 change 方法参数，增加文件列表
- 调整上传组件样式，限制文件类型- 优化裁剪区域大小和位置
- 修复部分样式问题，增加禁用状态样式
---
 src/components/RenderCropper/index.vue | 30 ++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/RenderCropper/index.vue b/src/components/RenderCropper/index.vue
index 2a74ec3..4991adb 100644
--- a/src/components/RenderCropper/index.vue
+++ b/src/components/RenderCropper/index.vue
@@ -1,15 +1,15 @@
 <template>
-  <div>
+  <div style="width: 100%;height: 100%">
     <el-upload
       action="#"
       list-type="picture-card"
       :auto-upload="false"
-      :limit="1"
       :file-list="fileList"
       :on-change="change"
+      accept=".png,.jpg"
     >
       <i slot="default" class="el-icon-plus"></i>
-      <div slot="file" slot-scope="{ file }">
+      <div slot="file" slot-scope="{ file }" style="width: 100%;height: 100%">
         <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
         <span class="el-upload-list__item-actions">
           <span class="el-upload-list__item-delete" @click="handleRemove(file)">
@@ -34,6 +34,7 @@
             rotatable
             scalable
             skewable
+            initial-center-size="none"
             translatable
           ></cropper-image>
           <cropper-shade hidden></cropper-shade>
@@ -42,10 +43,12 @@
             id="cropperSelection"
             movable
             resizable
+            hidded
+            hidden
             x="150"
             y="100"
-            width="275"
-            height="275"
+            width="50"
+            height="50"
             ref="selection"
           >
             <cropper-handle
@@ -136,11 +139,21 @@ export default {
   },
   filters: {},
   methods: {
+    beforeUpload(files, list) {
+      this.file = files[0]
+      this.fileList = files
+      this.visible = true
+      setTimeout(() => {
+        this.cropper = new Cropper('#image', {})
+      }, 300)
+    },
+
     handleRemove() {
       this.fileList = []
     },
-    change(file) {
+    change(file, list) {
       this.file = file
+      // this.fileList = []
       this.fileList = []
       this.visible = true
       setTimeout(() => {
@@ -236,4 +249,9 @@ cropper-canvas {
   //width: 20vw;
   max-height: 30vw !important;
 }
+
+.is-disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
 </style>