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 | 53 ++++++++++++++++++++++++++++++++---------------------
1 files changed, 32 insertions(+), 21 deletions(-)
diff --git a/admin/src/components/common/ImageCropper.vue b/admin/src/components/common/ImageCropper.vue
index 7929744..a58eedc 100644
--- a/admin/src/components/common/ImageCropper.vue
+++ b/admin/src/components/common/ImageCropper.vue
@@ -6,22 +6,20 @@
<vue-cropper
ref="cropper"
:img="imgSrc"
+ :width="options.width"
+ :height="options.height"
:canScale="options.canScale"
:autoCrop="options.autoCrop"
: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="鍥剧墖">
- <!-- <el-image-->
- <!-- v-if="cutImgSrc"-->
- <!-- style="width: 100px; height: 100px;vertical-align: middle;border-radius: 50%;"-->
- <!-- :src="cutImgSrc"-->
- <!-- fit="fill"></el-image>-->
+ <img style="width: 150px;height: 150px;border-radius1: 50%;object-fit: cover" :src="cutImgSrc" alt="鍥剧墖">
</div>
</div>
</div>
@@ -30,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 },
@@ -38,6 +36,12 @@
imgSrc: {
type: String,
default: ''
+ },
+ autoCrop: {
+ type: Object,
+ default () {
+ return { width: 500, height: 500 }
+ }
},
// 鍥炴樉涓婃淇濆瓨鐨勬埅鍥剧殑浣嶇疆
location: {
@@ -76,8 +80,11 @@
autoCrop: true,
canMove: false,
centerBox: true,
- autoCropWidth: 200,
- autoCropHeight: 200,
+ height: 500,
+ width: 500,
+ outputSize: 1,
+ autoCropWidth: 500,
+ autoCropHeight: 500,
fixed: true,
fixedNumber: [1, 1]
},
@@ -93,8 +100,8 @@
watch: {
},
methods: {
- getImagecropper(){
- return this.$refs.cropper
+ getImagecropper () {
+ return this.$refs.cropper
},
// 瀛︿範鎴浘妗嗗彉鍖栦簨浠�
realTime (data) {
@@ -170,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;
}
@@ -186,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