8000 add `excludeClass` prop to opt out child elements from pan/zoom · Issue #42 · ehassaan/vue-zoomable · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

add excludeClass prop to opt out child elements from pan/zoom #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
alekbless opened this issue May 7, 2025 · 2 comments
Open

add excludeClass prop to opt out child elements from pan/zoom #42

alekbless opened this issue May 7, 2025 · 2 comments

Comments

@alekbless
Copy link
alekbless commented May 7, 2025 •
edited
Loading

I’m embedding interactive Vuetify controls (e.g. a <v-slider>) inside <VueZoomable>, but any drag or wheel events on those controls currently trigger the container’s pan/zoom instead of the intended control behavior.

Proposal
Introduce an excludeClass prop (default: "zoom-exclude") on the VueZoomable component. When this class is applied to any child element, all pointer/drag/wheel handlers should ignore events originating from that element (and its descendants). This would mirror Panzoom’s excludeClass option (FAQ #3).

Happy to submit a PR with these changes if this aligns with the project direction.
@alekbless
Copy link
Author
alekbless commented May 8, 2025 •
edited
Loading

I solved it by stopping pointerdown,move and up in the v-slider:

<v-slider
@pointerdown.stop
@pointermove.stop
@pointerup.stop
/>

Thanks for creating this package 😊

@ehassaan
Copy link
Owner
ehassaan commented May 8, 2025

@alekbless I would prefer a slot for this. But does position absolute help in your case? That's what ControlButtons component uses,

https://github.com/ehassaan/vue-zoomable/blob/main/src/components/ControlButtons.vue#L148

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@alekbless @ehassaan
0