18 lines
1.7 KiB
Markdown
18 lines
1.7 KiB
Markdown
|
### Vue directives — “v-” helpers
|
|||
|
|
|
|||
|
|
| Directive | Mini usage | What it’s for |
|
|||
|
|
| ------------------ | -------------------------------------- | ------------------------------------------------------ |
|
|||
|
|
| **v-close-popup** | `<q-btn v-close-popup …>` | Click hits the nearest `QDialog`/`QMenu` so it closes. |
|
|||
|
|
| **v-intersection** | `<div v-intersection="onEnter">…` | Fires when element enters / leaves the viewport. |
|
|||
|
|
| **v-ripple** | `<div v-ripple>` | Material-style click ripple on any element. |
|
|||
|
|
| **v-mutation** | `<div v-mutation="onMut">` | Watches DOM mutations inside the element. |
|
|||
|
|
| **v-morph** | `<div v-morph="target">` | Smoothly morphs element A into element B. |
|
|||
|
|
| **v-scroll** | `<div v-scroll="onScroll">` | Emits scroll position while container/page scrolls. |
|
|||
|
|
| **v-scroll-fire** | `<div v-scroll-fire="cfg">` | Triggers handler once when scrolled past threshold. |
|
|||
|
|
| **v-touch-pan** | `<div v-touch-pan.horizontal="onPan">` | Pointer/touch pan gestures (x, y, both). |
|
|||
|
|
| **v-touch-swipe** | `<div v-touch-swipe.left="onSwipe">` | Swipe detection with direction modifiers. |
|
|||
|
|
| **v-touch-hold** | `<div v-touch-hold:500="onHold">` | Long-press / right-click hold handler. |
|
|||
|
|
| **v-touch-repeat** | `<div v-touch-repeat="onRepeat">` | Auto-repeats handler while pointer is held down. |
|
|||
|
|
|
|||
|
|
These directives ship with Quasar and require **no extra imports**—just drop them in a template.
|