From bc09bc87234065abe7130b84c92f81f143f5f3e7 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期四, 09 十月 2025 16:25:06 +0800
Subject: [PATCH] 最新版本541200007
---
admin/src/components/common/ImageCropper.vue | 48 +++++++++++++++++++++++++++++-------------------
1 files changed, 29 insertions(+), 19 deletions(-)
diff --git a/admin/src/components/common/ImageCropper.vue b/admin/src/components/common/ImageCropper.vue
index d15179c..a58eedc 100644
--- a/admin/src/components/common/ImageCropper.vue
+++ b/admin/src/components/common/ImageCropper.vue
@@ -13,13 +13,13 @@
:canMove="options.canMove"
:output-size="options.outputSize"
:centerBox="options.centerBox"
- :autoCropWidth="options.autoCropWidth"
- :autoCropHeight="options.autoCropHeight"
+ :autoCropWidth="autoCrop.width || options.autoCropWidth"
+ :autoCropHeight="autoCrop.height || options.autoCropHeight"
@realTime="realTime"
></vue-cropper>
</div>
<div class="previews">
- <img style="width: 100px;height: 100px;border-radius: 50%;object-fit: cover" :src="cutImgSrc" alt="鍥剧墖">
+ <img style="width: 150px;height: 150px;border-radius1: 50%;object-fit: cover" :src="cutImgSrc" alt="鍥剧墖">
</div>
</div>
</div>
@@ -28,7 +28,7 @@
<script>
import { VueCropper } from 'vue-cropper'
-import {upload} from "@/api/system/common";
+import { upload } from '@/api/system/common'
export default {
name: 'ImageCropper',
components: { VueCropper },
@@ -36,6 +36,12 @@
imgSrc: {
type: String,
default: ''
+ },
+ autoCrop: {
+ type: Object,
+ default () {
+ return { width: 500, height: 500 }
+ }
},
// 鍥炴樉涓婃淇濆瓨鐨勬埅鍥剧殑浣嶇疆
location: {
@@ -74,11 +80,11 @@
autoCrop: true,
canMove: false,
centerBox: true,
- height: 300,
- width: 300,
- outputSize:{width: 300, height: 300},
- autoCropWidth: 300,
- autoCropHeight: 300,
+ height: 500,
+ width: 500,
+ outputSize: 1,
+ autoCropWidth: 500,
+ autoCropHeight: 500,
fixed: true,
fixedNumber: [1, 1]
},
@@ -94,8 +100,8 @@
watch: {
},
methods: {
- getImagecropper(){
- return this.$refs.cropper
+ getImagecropper () {
+ return this.$refs.cropper
},
// 瀛︿範鎴浘妗嗗彉鍖栦簨浠�
realTime (data) {
@@ -171,10 +177,12 @@
.iconShot {
.icon-dialog {
.clip {
+ display: flex;
.img {
- height: 400px;
+ flex: 7.5;
+ height: 500px;
+ //float: left;
// display: inline-block;
-
.vue-cropper {
background-image: none;
}
@@ -187,13 +195,15 @@
}
.previews {
- width: 100%;
- height: 100px;
- position: relative;
+ //width: 100px;
+ flex: 2.5;
+ //float: right;
+ height: 200px;
+ //position: relative;
>img {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
+ //position: absolute;
+ //left: 50%;
+ transform: translate(35%, 50px);
max-height: 100%;
}
}
--
Gitblit v1.9.3