解决 ios 端 cl-cropper 高和宽为0时不触发 load 事件
This commit is contained in:
@@ -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", // 设置图片显示高度
|
height: height + "px", // 设置图片显示高度
|
||||||
width: toPixel(imageSize.width) + "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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user