THANK YOU VERY MUCH!!!
@spectrolite, by implementing what you suggested, everything worked and in a very clean way.
Also, fortunatelly my IOT esp8266 device happly loaded very fast a Quasar page in such small device.
Its very difficult to me as an electronic engineering student to understand how everything works (Nodejs/NPM + Quasar + ESLint + ES6 + Babel + NWJS), the web world is so huge nowaday, so I will try to explain well what I did to get Tree + Context menu.
- Created a DIV and put Tree element and de context menu as its child. Also added the context menu handler:
<div @contextmenu="rightClickHandler($event)">
-
Next, I poppulated Tree model data with the same as seen in quasar docs.
-
In the context menu tag I put a :V-SHOW property linked to a variable named enableContextMenu :
<q-context-menu v-show="enableContextMenu" ref="context">
- Inside context menu, I put an item that its label is linked to the posterior Tree element that is clicked:
<q-item>
<q-item-main :label="itemName"/>
</q-item>
- In the end, the right click event handler is implemented so when the clicked element have a <SPAN> tagName, the handler selects its innerHTML (element name) and enables the context menu to be shown by the enableContextMenu variable:
methods: {
rightClickHandler: function(e) {
e.preventDefault();
if(e.target.tagName == 'SPAN')
{
this.itemName = e.target.innerHTML;
this.enableContextMenu=true;
}
else
{
this.enableContextMenu=false;
}
}
}
Here’s the complete code
<template>
<q-layout
ref="layout"
view="lHh Lpr fff"
:left-class="{'bg-grey-2': true}"
>
<q-toolbar slot="header" class="flat">
<q-toolbar-title>
Quasar App
<div slot="subtitle">Running on Quasar v{{$q.version}}</div>
</q-toolbar-title>
</q-toolbar>
<div @contextmenu="rightClickHandler($event)">
<q-tree
:model="treeModel"
contract-html="<i class='material-icons'>remove_circle</i>"
expand-html="<i class='material-icons'>add_circle</i>"
/>
<q-context-menu v-show="enableContextMenu" ref="context">
<q-list link separator no-border style="min-width: 150px; max-height: 300px;"
@click="$refs.context.close()">
<q-item>
<q-item-main :label="itemName"/>
</q-item>
</q-list>
</q-context-menu>
</div>
</q-layout>
</template>
<script>
import {
dom,
event,
openURL,
QLayout,
QToolbar,
Toast,
QContextMenu,
QToolbarTitle,
QTree,
QBtn,
QIcon,
QList,
QListHeader,
QItem,
QItemSide,
QItemMain
} from 'quasar'
export default {
name: 'index',
components: {
QLayout,
QTree,
QToolbar,
QContextMenu,
QToolbarTitle,
QBtn,
QIcon,
QList,
QListHeader,
QItem,
QItemSide,
QItemMain
},
data () {
return {
enableContextMenu:false,
itemName: "",
treeModel: [
{
title: 'Item 1',
expanded: true,
icon: 'alarm',
children: [
{
title: 'Item 1.1',
expanded: false,
children: [
{
title: 'Item 1.1.1',
expanded: false,
children: [
{
title: 'Item 1.1.1.1',
expanded: false,
children: []
}
]
},
{
title: 'Item 1.1.2',
expanded: false,
children: []
}
]
},
{
title: 'Item 1.2',
expanded: false,
children: []
},
{
title: 'Item 1.3',
expanded: false,
handler () {
Toast.create('Tapped on item 1.3')
},
children: []
}
]
},
{
title: 'Item 2',
expanded: false,
children: [
{
title: 'Item 2.1',
expanded: false,
children: [
{
title: 'Item 2.1.1',
expanded: false,
children: []
},
{
title: 'Item 2.1.2',
expanded: false,
children: [
{
title: 'Item 2.1.2.1',
expanded: false,
children: []
},
{
title: 'Item 2.1.2.2',
expanded: false,
children: []
}
]
}
]
},
{
title: 'Item 2.2',
expanded: false,
children: []
},
{
title: 'Item 2.3',
expanded: false,
children: []
}
]
}
]
}
},
methods: {
rightClickHandler: function(e) {
e.preventDefault();
if(e.target.tagName == 'SPAN')
{
this.itemName = e.target.innerHTML;
this.enableContextMenu=true;
}
else
{
this.enableContextMenu=false;
}
}
}
}
</script>
