fix: el-image-viewer drag have problem (#3133)

* fix: el-image-viewer drag have problem

* Update packages/components/image-viewer/src/index.vue

Co-authored-by: jeremywu <15975785+JeremyWuuuuu@users.noreply.github.com>

Co-authored-by: jeremywu <15975785+JeremyWuuuuu@users.noreply.github.com>
This commit is contained in:
Alan Wang 2021-09-01 11:04:42 +08:00 committed by GitHub
parent 4a038cb969
commit 2431c6d44d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -242,6 +242,12 @@ export default defineComponent({
const { offsetX, offsetY } = transform.value
const startX = e.pageX
const startY = e.pageY
const divLeft = wrapper.value.clientLeft
const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth
const divTop = wrapper.value.clientTop
const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight
_dragHandler = rafThrottle(ev => {
transform.value = {
...transform.value,
@ -250,7 +256,12 @@ export default defineComponent({
}
})
on(document, 'mousemove', _dragHandler)
on(document, 'mouseup', () => {
on(document, 'mouseup', (e: MouseEvent) => {
const mouseX = e.pageX
const mouseY = e.pageY
if (mouseX < divLeft || mouseX > divRight || mouseY < divTop || mouseY > divBottom){
reset()
}
off(document, 'mousemove', _dragHandler)
})