Skip to content

Instantly share code, notes, and snippets.

@chupzzz
Created February 10, 2024 06:57
Show Gist options
  • Save chupzzz/ef92019c5522030e5f3864a47b29eebc to your computer and use it in GitHub Desktop.
Save chupzzz/ef92019c5522030e5f3864a47b29eebc to your computer and use it in GitHub Desktop.
Quasar 2 menu on hover (Vue 3)
<template>
<q-button
label="Hover button"
@mouseenter="menuOver = true; checkMenu()" @mouseleave="menuOver = false; checkMenu()"
>
<q-menu
transition-show="jump-up" transition-hide="jump-down"
anchor="top middle" self="bottom middle"
:offset="[0, 2]"
no-parent-event v-model="menuStatus"
@mouseover="listOver = true; checkMenu()" @mouseout="listOver = false; checkMenu()"
>
MY MENU
</q-menu>
</q-button>
</template>
<script setup>
import { ref } from 'vue'
import { debounce } from 'quasar'
const menuStatus = ref(false)
const menuOver = ref(false)
const listOver = ref(false)
const checkMenu = debounce(() => {
menuStatus.value = (menuOver.value || listOver.value)
}, 300)
</script>
@chupzzz
Copy link
Author

chupzzz commented Feb 10, 2024

Copied from my production code, lazy to make Codepen. Just try - it works 😊

Inspired by https://codepen.io/jd-0001/pen/GRRVxLZ
Optimized & refactored for Vue 3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment