Skip to content

[Feature Request] VTouchHold Directive for Long-Press of an ElementΒ #5322

@185driver

Description

@185driver

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:

  1. Align vuetify more closely to Google's MD spec for tooltips.
  2. 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:

  1. is a directive, so can be applied most anywhere directly
  2. allows for custom long-press duration length v-touch-hold:2000, but has a reasonable default setting of 600ms
  3. can be used for both mouse and touch events, or limited to just touch events v-touch-hold.noMouse, as desired
  4. supports both .stop and .prevent modifier use, if needed
  5. calls a method when the duration threshold has been reached v-touch-hold="myHandler"
  6. 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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions