Popup Menu

GITHUB

To create singleton menu element or popup dialog under clicked position, use this component.


Code:

  
HTML
<fvMenu v-model="menu"> <fvList parent autofocus> <fvListItem> Item #1 </fvListItem> <fvListItem> Item #2 </fvListItem> </fvList> </fvMenu> <fvButton @click="menu = !menu"> Open Menu </fvButton>
  
Javascript
export default { data () { return { menu: false } } }

Examples:



Right Click in this box



Notes:

  • fvMenu is singleton. It means you can create one fvMenu and use it on several places with custom arguments.
  • fvMenu calculate position of itself by listening to global click events.

API:

NameTypeDefaultDescription
value
Boolean
false
Visibility of menu.
NameParamsDescription
input
newVisibilityState
Fired when component request to change value (close and open request by dialog).
open
---
Fired when dialog opened.
close
---
Fired when dialog closed.
NameDescription
default
---
NameDescription
.fv-size-xs
XSmall size
.fv-size-sm
Small size
.fv-size-md
Medium size (actived by default)
.fv-size-lg
Large size
.fv-size-xl
XLarge size