解决 ios 端 cl-cropper 高和宽为0时不触发 load 事件
This commit is contained in:
@@ -12,7 +12,12 @@
|
||||
<view class="cl-cropper__image">
|
||||
<image
|
||||
class="cl-cropper__image-inner"
|
||||
:class="[pt.image?.className]"
|
||||
:class="[
|
||||
{
|
||||
'no-dragging': !touch.isTouching
|
||||
},
|
||||
pt.image?.className
|
||||
]"
|
||||
:src="imageUrl"
|
||||
:style="imageStyle"
|
||||
@load="onImageLoaded"
|
||||
@@ -317,18 +322,23 @@ const imageStyle = computed(() => {
|
||||
const flipX = flipHorizontal.value ? "scaleX(-1)" : "scaleX(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 = {
|
||||
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;
|
||||
});
|
||||
@@ -1192,7 +1202,17 @@ defineExpose({
|
||||
z-index: 510;
|
||||
|
||||
&__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 {
|
||||
|
||||
Reference in New Issue
Block a user