1.7 KiB
1.7 KiB
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.