From 4eb20985844d60d5f8ab062d9f1846b7303f4d09 Mon Sep 17 00:00:00 2001
From: otomad <shuishenme@outlook.com>
Date: Wed, 1 Nov 2023 21:00:02 +0800
Subject: [PATCH] Try to use vue-cropper

---
 nuxt.config.ts       |  1 +
 pages/components.vue | 44 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0f672d54..8dc9dc6d 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -71,6 +71,7 @@ export default defineNuxtConfig({
 		"styles/global-colors.scss",
 		"styles/elements/_index.scss",
 		"vue-virtual-scroller/dist/vue-virtual-scroller.css",
+		"vue-cropper/dist/index.css",
 	],
 	vite: {
 		plugins: [
diff --git a/pages/components.vue b/pages/components.vue
index 65b984e4..28f89ab6 100755
--- a/pages/components.vue
+++ b/pages/components.vue
@@ -2,6 +2,8 @@
 	import animationData from "lotties/spinner-dev1.json";
 	import beepSrc from "assets/audios/NOVA 2022.1 Alert Quick.ogg";
 	import type { ToastEvent } from "composables/toast";
+	import { VueCropper } from "vue-cropper";
+	import cropTestImage from "assets/images/av820864307.jpg";
 
 	const page = ref(1);
 	const pages = ref(99);
@@ -121,6 +123,24 @@
 		op.value = getRandomOp();
 	}
 
+	const vueCropperOption = reactive({
+		img: cropTestImage,
+		size: 1,
+		full: false,
+		outputType: "png",
+		canMove: true,
+		fixedBox: false,
+		original: false,
+		canMoveBox: true,
+		autoCrop: true,
+		// 只有自动截图开启 宽度高度才生效
+		autoCropWidth: 750,
+		autoCropHeight: 340,
+		centerBox: true,
+		high: true,
+		max: 99999,
+	});
+
 	useHead({ title: t.components_test_page });
 </script>
 
@@ -302,6 +322,30 @@
 				<ColorPicker v-model="color" enableAlpha />
 			</div>
 			<hr />
+			<div :style="{ height: '500px' }">
+				<ClientOnly>
+					<VueCropper
+						:img="vueCropperOption.img"
+						:outputSize="vueCropperOption.size"
+						:outputType="vueCropperOption.outputType"
+						:info="true"
+						:full="vueCropperOption.full"
+						:fixed="false"
+						:canMove="vueCropperOption.canMove"
+						:canMoveBox="vueCropperOption.canMoveBox"
+						:fixedBox="vueCropperOption.fixedBox"
+						:original="vueCropperOption.original"
+						:autoCrop="vueCropperOption.autoCrop"
+						:autoCropWidth="vueCropperOption.autoCropWidth"
+						:autoCropHeight="vueCropperOption.autoCropHeight"
+						:centerBox="vueCropperOption.centerBox"
+						:high="vueCropperOption.high"
+						mode="contain"
+						:maxImgSize="vueCropperOption.max"
+					/>
+				</ClientOnly>
+			</div>
+			<hr />
 			<Accordion autoCollapse>
 				<AccordionItem title="第1个">
 					<h4>标题</h4>