Comments (4)
Yassou Babis,
Hmm, I believe this should work right out of the box.
I've set up a quick codesandbox as an example: https://codesandbox.io/s/naughty-bhabha-zi0gj?file=/src/components/HelloWorld.vue
One thing to point out is that you must use unique elementId
values when initializing each vue-simple-context-menu
block:
<vue-simple-context-menu
:elementId="'myFirstMenu'"
:options="optionsArray1"
:ref="'vueSimpleContextMenu1'"
@option-clicked="optionClicked1"
/>
<vue-simple-context-menu
:elementId="'mySecondMenu'"
:options="optionsArray1"
:ref="'vueSimpleContextMenu2'"
@option-clicked="optionClicked2"
/>
As can be seen in the example, these two instances share an options array, but each one has their own instance.
Let me know if I understand your question correctly. Thank you.
from vue-simple-context-menu.
Thanks for the very quick response.
It wasn't really what I was looking for. In your example, you can have two simultaneously open context menus, whereas I was looking for max one at a time. So, if I right click to the left list, a context menu opens; if I then right click on the right list, the previous context menu disappears and a new one on the right list appears -- so only one at a time. Something like the native context menu one gets from a right click. You can only have one at a time.
Not sure if that's possible.
Thanks for your help.
from vue-simple-context-menu.
Ahh ok I see, sure that shouldn't be too tough.
You can use the undocumented function built into each vue-simple-context-menu
instance, hideContextMenu()
. I've updated my example to do this in each handleClick
handler. You can check it out: https://codesandbox.io/s/naughty-bhabha-zi0gj?file=/src/components/HelloWorld.vue
You could expand my rudimentary example to a more elegant solution by doing something like looping over all other ref
instances except the one that was clicked.
Basically the logic could be - when any item that has a vue-simple-context-menu
instance attached is clicked, hide all other vue-simple-context-menu
instances.
Please let me know if that clears it up and if I can help further. Thank you.
from vue-simple-context-menu.
Closing, will reopen if needed.
from vue-simple-context-menu.
Related Issues (20)
- Feature: Divider Line Support HOT 8
- type definition HOT 6
- Feature: Disabled Menu Item HOT 3
- Include fontawesome icons in contextual menu (use v-html) HOT 7
- Using jQuery Event as event... HOT 1
- Not firing option-clicked handler?
- Option click method not being executed HOT 1
- Inline Template issues? HOT 2
- Updating to Vue 3 HOT 3
- Nuxt and simple context menu HOT 3
- Conditional suppress options in contextmenu? HOT 2
- Upgrade to Vue 3 HOT 1
- How to add Submenu for context menu HOT 1
- import css not build with npm run build HOT 2
- Trigger showMenu event on text selection HOT 2
- Cannot read properties of undefined (reading 'showMenu') HOT 4
- How to use on browser without npm HOT 2
- Deprecation warning HOT 2
- sideEffects vs css file inclusion HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-simple-context-menu.