优化

cool/hooks/page.ts

@@ -99,6 +99,11 @@ class Page {
 	 * @returns 视图高度
 	 */
 	getViewHeight() {
+		// #ifdef H5
+		return uni.getWindowInfo().windowHeight;
+		// #endif
+
+		// #ifndef H5
 		const { screenHeight } = uni.getWindowInfo();
 
 		let h = screenHeight;
@@ -108,6 +113,7 @@ class Page {
 		}
 
 		return h;
+		// #endif
 	}
 
 	/**

pages/demo/other/cropper.uvue

@@ -1,36 +1,43 @@
 <template>
 	<cl-page>
-		<view class="cropper-demo">
+		<view class="p-3">
-			<cl-cropper
+			<demo-item :label="t('自定义')">
-				:src="imageSrc"
+				<cl-button @tap="chooseImage">{{ t("选择图片") }}</cl-button>
-				:max-scale="3"
+
-				:min-scale="0.5"
+				<cl-list border :pt="{ className: 'mt-5' }">
-				@crop="onCrop"
+					<cl-list-item :label="t('调节裁剪框大小')">
-				@load="onImageLoad"
+						<cl-switch v-model="resizable"></cl-switch>
-			></cl-cropper>
+					</cl-list-item>
-			
+				</cl-list>
-			<!-- 选择图片按钮 -->
+			</demo-item>
-			<view class="select-image-btn" @tap="selectImage">
-				<cl-button type="primary" size="small">选择图片</cl-button>
-			</view>
 		</view>
+
+		<cl-cropper
+			ref="cropperRef"
+			:resizable="resizable"
+			@crop="onCrop"
+			@load="onImageLoad"
+		></cl-cropper>
 	</cl-page>
 </template>
 
 <script lang="ts" setup>
+import { t } from "@/locale";
+import DemoItem from "../components/item.uvue";
 import { ref } from "vue";
 
-const imageSrc = ref("https://unix.cool-js.com/images/demo/avatar.jpg");
+const cropperRef = ref<ClCropperComponentPublicInstance | null>(null);
 
-function selectImage() {
+const resizable = ref(true);
-	// 选择图片
+
+function chooseImage() {
 	uni.chooseImage({
 		count: 1,
 		sizeType: ["original", "compressed"],
 		sourceType: ["album", "camera"],
 		success: (res) => {
 			if (res.tempFilePaths.length > 0) {
-				imageSrc.value = res.tempFilePaths[0];
+				cropperRef.value!.open(res.tempFilePaths[0]);
 			}
 		}
 	});
@@ -44,18 +51,11 @@ function onCrop(result: any) {
 	});
 }
 
-function onImageLoad(e: any) {
+function onImageLoad(e: UniImageLoadEvent) {
-	console.log("图片加载完成:", e);
+	console.log("图片加载完成", e);
 }
+
+onReady(() => {
+	cropperRef.value!.open('https://uni-docs.cool-js.com/demo/pages/demo/static/bg2.png');
+});
 </script>
-
-<style lang="scss" scoped>
-.cropper-demo {
-	@apply relative w-full h-full;
-}
-
-.select-image-btn {
-	@apply absolute top-4 right-4;
-	z-index: 10;
-}
-</style>

uni_modules/cool-ui/components/cl-cropper/props.ts

@@ -17,9 +17,10 @@ export type ClCropperProps = {
 	cropWidth?: string | number;
 	cropHeight?: string | number;
 	maxScale?: number;
-	minScale?: number;
 	showButtons?: boolean;
 	quality?: number;
 	format?: "jpg" | "png";
 	disabled?: boolean;
+	canResize?: boolean; // 是否可以自定义裁剪框大小
+	canFlip?: boolean; // 是否显示翻转功能
 };

uni_modules/cool-ui/types/component.d.ts

@@ -152,3 +152,9 @@ declare type ClSignComponentPublicInstance = {
 	clear: () => void;
 	toPng: () => Promise<string>;
 };
+
+declare type ClCropperComponentPublicInstance = {
+	open: (url: string) => void;
+	close: () => void;
+	chooseImage: () => void;
+};