blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(ImagePreview): optimize the preview effect of long images (#11857)

Browse Source 
* feat(ImagePreview): optimize the preview effect of long images

* fix: optimize logic

* fix: optimize logic
This commit is contained in:
inottn 2023-05-21 10:10:59 +08:00 committed by GitHub
parent 08f82392b7
commit fe2335eb09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/vant/src/image-preview/ImagePreviewItem.tsx
View File

@ -40,6 +40,8 @@ const getCenter = (touches: TouchList) => ({
const bem = createNamespace('image-preview')[1]; const bem = createNamespace('image-preview')[1];
const longImageRatio = 2.6;
export default defineComponent({ export default defineComponent({
props: { props: {
src: String, src: String,
@ -69,12 +71,10 @@ export default defineComponent({
const touch = useTouch(); const touch = useTouch();
const imageRef = ref<ComponentInstance>(); const imageRef = ref<ComponentInstance>();
const swipeItem = ref<ComponentInstance>(); const swipeItem = ref<ComponentInstance>();
const vertical = ref(false);
const isLongImage = ref(false);
const vertical = computed(() => { let initialMoveY = 0;
const { rootWidth, rootHeight } = props;
const rootRatio = rootHeight / rootWidth;
return state.imageRatio > rootRatio;
});
const imageStyle = computed(() => { const imageStyle = computed(() => {
const { scale, moveX, moveY, moving, zooming } = state; const { scale, moveX, moveY, moving, zooming } = state;
@ -82,7 +82,7 @@ export default defineComponent({
transitionDuration: zooming || moving ? '0s' : '.3s', transitionDuration: zooming || moving ? '0s' : '.3s',
}; };
if (scale !== 1) { if (scale !== 1 || isLongImage.value) {
// use matrix to solve the problem of elements not rendering due to safari optimization // use matrix to solve the problem of elements not rendering due to safari optimization
style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`; style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
} }
@ -138,7 +138,7 @@ export default defineComponent({
state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value); state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
} else { } else {
state.moveX = 0; state.moveX = 0;
state.moveY = 0; state.moveY = isLongImage.value ? initialMoveY : 0;
} }
emit('scale', { emit('scale', {
@ -157,7 +157,7 @@ export default defineComponent({
setScale( setScale(
scale, scale,
scale === 2 scale === 2 || isLongImage.value
? { x: touch.startX.value, y: touch.startY.value } ? { x: touch.startX.value, y: touch.startY.value }
: undefined : undefined
); );
@ -192,7 +192,8 @@ export default defineComponent({
// whether the image position is moved after scaling // whether the image position is moved after scaling
isImageMoved = false; isImageMoved = false;
state.moving = fingerNum === 1 && state.scale !== 1; state.moving =
fingerNum === 1 && (state.scale !== 1 || isLongImage.value);
state.zooming = fingerNum === 2 && !offsetX.value; state.zooming = fingerNum === 2 && !offsetX.value;
if (state.zooming) { if (state.zooming) {
@ -318,9 +319,28 @@ export default defineComponent({
touch.reset(); touch.reset();
}; };
const resize = () => {
const { rootWidth, rootHeight } = props;
const rootRatio = rootHeight / rootWidth;
const { imageRatio } = state;
vertical.value =
state.imageRatio > rootRatio && imageRatio < longImageRatio;
isLongImage.value =
state.imageRatio > rootRatio && imageRatio >= longImageRatio;
if (isLongImage.value) {
initialMoveY = (imageRatio * rootWidth - rootHeight) / 2;
state.moveY = initialMoveY;
}
resetScale();
};
const onLoad = (event: Event) => { const onLoad = (event: Event) => {
const { naturalWidth, naturalHeight } = event.target as HTMLImageElement; const { naturalWidth, naturalHeight } = event.target as HTMLImageElement;
state.imageRatio = naturalHeight / naturalWidth; state.imageRatio = naturalHeight / naturalWidth;
resize();
}; };
watch(() => props.active, resetScale); watch(() => props.active, resetScale);
@ -332,6 +352,7 @@ export default defineComponent({
} }
} }
); );
watch(() => [props.rootWidth, props.rootHeight], resize);
// useEventListener will set passive to `false` to eliminate the warning of Chrome // useEventListener will set passive to `false` to eliminate the warning of Chrome
useEventListener('touchmove', onTouchMove, { useEventListener('touchmove', onTouchMove, {