Przeglądaj źródła

解决 ios 端 cl-cropper 高和宽为0时不触发 load 事件

icssoa 6 miesięcy temu
rodzic
commit
083c8b1325

+ 29 - 9
uni_modules/cool-ui/components/cl-cropper/cl-cropper.uvue

@@ -12,7 +12,12 @@
 		<view class="cl-cropper__image">
 		<view class="cl-cropper__image">
 			<image
 			<image
 				class="cl-cropper__image-inner"
 				class="cl-cropper__image-inner"
-				:class="[pt.image?.className]"
+				:class="[
+					{
+						'no-dragging': !touch.isTouching
+					},
+					pt.image?.className
+				]"
 				:src="imageUrl"
 				:src="imageUrl"
 				:style="imageStyle"
 				:style="imageStyle"
 				@load="onImageLoaded"
 				@load="onImageLoaded"
@@ -317,18 +322,23 @@ const imageStyle = computed(() => {
 	const flipX = flipHorizontal.value ? "scaleX(-1)" : "scaleX(1)";
 	const flipX = flipHorizontal.value ? "scaleX(-1)" : "scaleX(1)";
 	const flipY = flipVertical.value ? "scaleY(-1)" : "scaleY(1)";
 	const flipY = flipVertical.value ? "scaleY(-1)" : "scaleY(1)";
 
 
+	let height = toPixel(imageSize.height);
+	let width = toPixel(imageSize.width);
+
+	// 解决 ios 端高和宽为0时不触发 load 事件
+	if (height == 0) {
+		height = 1;
+		width = 1;
+	}
+
 	// 创建基础样式对象
 	// 创建基础样式对象
 	const style = {
 	const style = {
 		transform: `translate(${toPixel(transform.translateX)}px, ${toPixel(transform.translateY)}px) ${flipX} ${flipY} rotate(${rotate.value}deg)`, // 设置图片位移和翻转变换
 		transform: `translate(${toPixel(transform.translateX)}px, ${toPixel(transform.translateY)}px) ${flipX} ${flipY} rotate(${rotate.value}deg)`, // 设置图片位移和翻转变换
-		height: toPixel(imageSize.height) + "px", // 设置图片显示高度
-		width: toPixel(imageSize.width) + "px" // 设置图片显示宽度
+		height: height + "px", // 设置图片显示高度
+		width: width + "px", // 设置图片显示宽度
+		opacity: height == 0 ? 0 : 1 // 设置图片显示透明度
 	};
 	};
 
 
-	// 如果不在触摸状态,添加过渡动画
-	if (!touch.isTouching) {
-		style["transitionDuration"] = "0.3s"; // 设置过渡动画时长
-	}
-
 	// 返回样式对象
 	// 返回样式对象
 	return style;
 	return style;
 });
 });
@@ -1192,7 +1202,17 @@ defineExpose({
 	z-index: 510;
 	z-index: 510;
 
 
 	&__image {
 	&__image {
-		@apply absolute top-0 left-0 flex items-center justify-center w-full h-full pointer-events-none;
+		@apply absolute top-0 left-0 flex items-center justify-center w-full h-full;
+		@apply pointer-events-none;
+
+		&-inner {
+			@apply transition-none;
+
+			.no-dragging {
+				@apply duration-300;
+				transition-property: transform;
+			}
+		}
 	}
 	}
 
 
 	&__mask {
 	&__mask {