[Feature Request] VTouchHold Directive for Long-Press of an Element
Open
D: New Directive
T: feature
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
What problem does this feature solve?
Google's Tooltips MD spec mentions:
A tooltip is displayed upon tapping and holding a screen element or component (on mobile) or hovering over it (desktop).
Vuetify has the mouse hover method solved for tooltips on desktop, but does not yet provide a method to handle a finger long-press on mobile. Instead, a <v-tooltip> displays immediately on tap/click. This is sometimes the desired response, but other times it is not.
Adding a v-touch-hold type directive to vuetify would:
- Align vuetify more closely to Google's MD spec for tooltips.
- Potentially make it easy for developers to implement long-press functionality within a vuetify app anywhere it's needed. The current offerings elsewhere (other than here) do not seem a good match for vuetify use.
What is your proposed solution?
A v-touch-hold directive such as used by Quasar seems to have the best combination of features, simplicity, and effectiveness. It:
- is a directive, so can be applied most anywhere directly
- allows for custom long-press duration length
v-touch-hold:2000, but has a reasonable default setting of 600ms - can be used for both mouse and touch events, or limited to just touch events
v-touch-hold.noMouse, as desired - supports both
.stopand.preventmodifier use, if needed - calls a method when the duration threshold has been reached
v-touch-hold="myHandler" - passes the event to the handler, with the developer being able to glean the screen position and duration length (this feature may or may not be that useful)
Thanks for considering this request.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.