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

refactor(ImagePreviewItem): refactor with composition api

Browse Source
This commit is contained in:
chenjiahan 2020-09-14 17:14:12 +08:00
parent 02c7a75ee3
commit f75f6bf293
2 changed files with 164 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/composition/use-touch.ts
View File

@ -52,6 +52,7 @@ export function useTouch() {
return { return {
move, move,
start, start,
reset,
startX, startX,
startY, startY,
deltaX, deltaX,

315
src/image-preview/ImagePreviewItem.js
View File

@ -1,10 +1,12 @@
import { watch, computed, reactive } from 'vue';
// Utils // Utils
import { bem } from './shared'; import { bem } from './shared';
import { range } from '../utils/format/number'; import { range } from '../utils/format/number';
import { preventDefault } from '../utils/dom/event'; import { preventDefault } from '../utils/dom/event';
// Mixins // Composition
import { TouchMixin } from '../mixins/touch'; import { useTouch } from '../composition/use-touch';
// Component // Component
import Image from '../image'; import Image from '../image';
@ -19,8 +21,6 @@ function getDistance(touches) {
} }
export default { export default {
mixins: [TouchMixin],
props: { props: {
src: String, src: String,
show: Boolean, show: Boolean,
@ -33,8 +33,8 @@ export default {
emits: ['scale', 'close'], emits: ['scale', 'close'],
data() { setup(props, { emit }) {
return { const state = reactive({
scale: 1, scale: 1,
moveX: 0, moveX: 0,
moveY: 0, moveY: 0,
@ -43,163 +43,183 @@ export default {
imageRatio: 0, imageRatio: 0,
displayWidth: 0, displayWidth: 0,
displayHeight: 0, displayHeight: 0,
}; });
},
computed: { const touch = useTouch();
vertical() {
const { rootWidth, rootHeight } = this; const vertical = computed(() => {
const { rootWidth, rootHeight } = props;
const rootRatio = rootHeight / rootWidth; const rootRatio = rootHeight / rootWidth;
return this.imageRatio > rootRatio; return state.imageRatio > rootRatio;
}, });
imageStyle() { const imageStyle = computed(() => {
const { scale } = this; const { scale, moveX, moveY, moving, zooming } = state;
const style = { const style = {
transitionDuration: this.zooming || this.moving ? '0s' : '.3s', transitionDuration: zooming || moving ? '0s' : '.3s',
}; };
if (scale !== 1) { if (scale !== 1) {
const offsetX = this.moveX / scale; const offsetX = moveX / scale;
const offsetY = this.moveY / scale; const offsetY = moveY / scale;
style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`; style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
} }
return style; return style;
}, });
maxMoveX() { const maxMoveX = computed(() => {
if (this.imageRatio) { if (state.imageRatio) {
const displayWidth = this.vertical const { rootWidth, rootHeight } = props;
? this.rootHeight / this.imageRatio const displayWidth = vertical.value
: this.rootWidth; ? rootHeight / state.imageRatio
: rootWidth;
return Math.max(0, (this.scale * displayWidth - this.rootWidth) / 2); return Math.max(0, (state.scale * displayWidth - rootWidth) / 2);
} }
return 0; return 0;
}, });
maxMoveY() { const maxMoveY = computed(() => {
if (this.imageRatio) { if (state.imageRatio) {
const displayHeight = this.vertical const { rootWidth, rootHeight } = props;
? this.rootHeight const displayHeight = vertical.value
: this.rootWidth * this.imageRatio; ? rootHeight
: rootWidth * state.imageRatio;
return Math.max(0, (this.scale * displayHeight - this.rootHeight) / 2); return Math.max(0, (state.scale * displayHeight - rootHeight) / 2);
} }
return 0; return 0;
}, });
},
watch: { const setScale = (scale) => {
show(val) { state.scale = range(scale, +props.minZoom, +props.maxZoom);
if (!val) { emit('scale', {
this.resetScale(); scale: state.scale,
} index: state.active,
},
},
mounted() {
this.bindTouchEvent(this.$el);
},
methods: {
resetScale() {
this.setScale(1);
this.moveX = 0;
this.moveY = 0;
},
setScale(scale) {
this.scale = range(scale, +this.minZoom, +this.maxZoom);
this.$emit('scale', {
scale: this.scale,
index: this.active,
}); });
}, };
toggleScale() { const resetScale = () => {
const scale = this.scale > 1 ? 1 : 2; setScale(1);
state.moveX = 0;
state.moveY = 0;
};
this.setScale(scale); const toggleScale = () => {
this.moveX = 0; const scale = state.scale > 1 ? 1 : 2;
this.moveY = 0;
},
onTouchStart(event) { setScale(scale);
state.moveX = 0;
state.moveY = 0;
};
let startMoveX;
let startMoveY;
let startScale;
let startDistance;
let doubleTapTimer;
let touchStartTime;
const onTouchStart = (event) => {
const { touches } = event; const { touches } = event;
const { offsetX = 0 } = this; const { offsetX } = touch;
this.touchStart(event); touch.start(event);
this.touchStartTime = new Date();
this.startMoveX = this.moveX; startMoveX = state.moveX;
this.startMoveY = this.moveY; startMoveY = state.moveY;
touchStartTime = new Date();
this.moving = touches.length === 1 && this.scale !== 1; state.moving = touches.length === 1 && state.scale !== 1;
this.zooming = touches.length === 2 && !offsetX; state.zooming = touches.length === 2 && !offsetX.value;
if (this.zooming) { if (state.zooming) {
this.startScale = this.scale; startScale = state.scale;
this.startDistance = getDistance(event.touches); startDistance = getDistance(event.touches);
} }
}, };
onTouchMove(event) { const onTouchMove = (event) => {
const { touches } = event; const { touches } = event;
this.touchMove(event); touch.move(event);
if (this.moving || this.zooming) { if (state.moving || state.zooming) {
preventDefault(event, true); preventDefault(event, true);
} }
if (this.moving) { if (state.moving) {
const moveX = this.deltaX + this.startMoveX; const { deltaX, deltaY } = touch;
const moveY = this.deltaY + this.startMoveY; const moveX = deltaX.value + startMoveX;
this.moveX = range(moveX, -this.maxMoveX, this.maxMoveX); const moveY = deltaY.value + startMoveY;
this.moveY = range(moveY, -this.maxMoveY, this.maxMoveY); state.moveX = range(moveX, -maxMoveX.value, maxMoveX.value);
state.moveY = range(moveY, -maxMoveY.value, maxMoveY.value);
} }
if (this.zooming && touches.length === 2) { if (state.zooming && touches.length === 2) {
const distance = getDistance(touches); const distance = getDistance(touches);
const scale = (this.startScale * distance) / this.startDistance; const scale = (startScale * distance) / startDistance;
this.setScale(scale); setScale(scale);
} }
}, };
onTouchEnd(event) { const checkTap = () => {
const { offsetX, offsetY } = touch;
const deltaTime = new Date() - touchStartTime;
const TAP_TIME = 250;
const TAP_OFFSET = 10;
if (
offsetX.value < TAP_OFFSET &&
offsetY.value < TAP_OFFSET &&
deltaTime < TAP_TIME
) {
if (doubleTapTimer) {
clearTimeout(doubleTapTimer);
doubleTapTimer = null;
toggleScale();
} else {
doubleTapTimer = setTimeout(() => {
emit('close');
doubleTapTimer = null;
}, TAP_TIME);
}
}
};
const onTouchEnd = (event) => {
let stopPropagation = false; let stopPropagation = false;
/* istanbul ignore else */ /* istanbul ignore else */
if (this.moving || this.zooming) { if (state.moving || state.zooming) {
stopPropagation = true; stopPropagation = true;
if ( if (
this.moving && state.moving &&
this.startMoveX === this.moveX && startMoveX === state.moveX &&
this.startMoveY === this.moveY startMoveY === state.moveY
) { ) {
stopPropagation = false; stopPropagation = false;
} }
if (!event.touches.length) { if (!event.touches.length) {
if (this.zooming) { if (state.zooming) {
this.moveX = range(this.moveX, -this.maxMoveX, this.maxMoveX); state.moveX = range(state.moveX, -maxMoveX.value, maxMoveX.value);
this.moveY = range(this.moveY, -this.maxMoveY, this.maxMoveY); state.moveY = range(state.moveY, -maxMoveY.value, maxMoveY.value);
this.zooming = false; state.zooming = false;
} }
this.moving = false; state.moving = false;
this.startMoveX = 0; startMoveX = 0;
this.startMoveY = 0; startMoveY = 0;
this.startScale = 1; startScale = 1;
if (this.scale < 1) { if (state.scale < 1) {
this.resetScale(); resetScale();
} }
} }
} }
@ -207,56 +227,47 @@ export default {
// eliminate tap delay on safari // eliminate tap delay on safari
preventDefault(event, stopPropagation); preventDefault(event, stopPropagation);
this.checkTap(); checkTap();
this.resetTouchStatus(); touch.reset();
},
checkTap() {
const { offsetX = 0, offsetY = 0 } = this;
const deltaTime = new Date() - this.touchStartTime;
const TAP_TIME = 250;
const TAP_OFFSET = 10;
if (
offsetX < TAP_OFFSET &&
offsetY < TAP_OFFSET &&
deltaTime < TAP_TIME
) {
if (this.doubleTapTimer) {
clearTimeout(this.doubleTapTimer);
this.doubleTapTimer = null;
this.toggleScale();
} else {
this.doubleTapTimer = setTimeout(() => {
this.$emit('close');
this.doubleTapTimer = null;
}, TAP_TIME);
}
}
},
onLoad(event) {
const { naturalWidth, naturalHeight } = event.target;
this.imageRatio = naturalHeight / naturalWidth;
},
},
render() {
const imageSlots = {
loading: () => <Loading type="spinner" />,
}; };
return ( const onLoad = (event) => {
<SwipeItem class={bem('swipe-item')}> const { naturalWidth, naturalHeight } = event.target;
<Image state.imageRatio = naturalHeight / naturalWidth;
v-slots={imageSlots} };
src={this.src}
fit="contain" watch(
class={bem('image', { vertical: this.vertical })} () => props.show,
style={this.imageStyle} (value) => {
onLoad={this.onLoad} if (!value) {
/> resetScale();
</SwipeItem> }
}
); );
return () => {
const imageSlots = {
loading: () => <Loading type="spinner" />,
};
return (
<SwipeItem
class={bem('swipe-item')}
onTouchstart={onTouchStart}
onTouchmove={onTouchMove}
onTouchend={onTouchEnd}
onTouchcancel={onTouchEnd}
>
<Image
v-slots={imageSlots}
src={props.src}
fit="contain"
class={bem('image', { vertical: vertical.value })}
style={imageStyle.value}
onLoad={onLoad}
/>
</SwipeItem>
);
};
}, },
}; };