Comments (6)
@v1r0x - Thank you for your support and I'm glad you like the context menu.
For the nested menus I haven't really thought about it, but it does seem like a good idea and I'm sure others would like this feature as well. I'm not really sure how I would do it, but if you would like to create a pull request that would be appreciated. I would be more than happy to add you as a collaborator to the repo.
from vue-context.
I just added a nested list to an item as markup and added some css magic without touching your code.
I didn't have a look at the code yet, but I'll try to do next week and play around with it. If I have an idea how to implement it, I'll open a PR and we can discuss further details :)
Thanks for your offer, I'll get back to it when I actually collaborate instead of just having an idea/submitting an issue 😉
from vue-context.
I had a look at the code and I think it is not possible, since the v-context
only handles the open
function and sets the correct position. Thus, it does not know anything about the structure of the data inside the v-context
. One could display an image, a list, a table or even an iframe using the component (which is a nice feature btw (not the iframe of course 😉).
One solution could be to move the markup to the component instead of letting the user do it. With this approach it would no longer be possible to add anything other than a list to the context menu.
Code could then be something like this:
<vue-context :entries="contextMenuEntries"></vue-context>
...
contextMenuEntries: [
{
label: Entry 1,
onClick: data => this.doSomething(data),
children: [
{
label: 'Subentry 1',
onClick: data => this.doSomethingDifferent(data)
}
]
}
]
...
// Markup
<ul v-for="entry in entries">
<li @click="entry.onClick(...)">
{{ entry.label }}
<vue-context v-if="entry.children" :entries="entry.children"></vue-context>
</li>
</ul>
The entries
property should then be parsed in the component and handle all the markup and event handling stuff.
I don't know if changing the structure (and breaking backward compatibility) is worth it to have nested menus. And since this is your component, the decision should be up to you. If you decide that it's worth it, I'm happy to help. If you decide to drop nested menus, it's fine for me as I know of the (above mentioned) caveats :)
from vue-context.
First of all, thank you for time time and effort you have put into this. Since implementing this would mean removing some of the flexibility of the menu in the first place, I think I might pass on this for now. My favorite part of the menu is the scoped slot the menu provides, and using a prop really wouldn't allow for that.
I will keep this in mind for any future development I perform on the menu and maybe I will even be able to come up a solution to accommodate this.
from vue-context.
Hi,
I was waiting for this feature. This is awesome.
Please add documentation over it.
A sample code can help me now.
from vue-context.
@pranavkumar389 I'm hoping to add documentation for it, as well as the new version, sometime this weekend.
from vue-context.
Related Issues (20)
- Context Menu stays open if you click in an iframe HOT 1
- NOT FOUND node_modules/vue-context/dist/js/vue-context.js HOT 3
- Sintax error in normalize-slot.js in IE 11 HOT 3
- Vue global install not support. HOT 4
- Documentation site is down? HOT 3
- Its possible to open the context menu from children components? HOT 3
- Animation while hiding HOT 1
- Double export brakes jest test HOT 9
- How to adjust the menu (menu item) height? HOT 1
- How to use it from child / nested components? HOT 4
- How to use it in Script Tag HOT 4
- Type definition for typescript HOT 1
- Vue 3 Support HOT 2
- The nested menu is not visible in Safari/MacOS HOT 2
- Contextmenu won't close after open another one HOT 4
- Nested Menus Can't display properly in chrome 73 HOT 2
- Native cut copy paste functions HOT 1
- component without npm HOT 1
- opening the menu on a regular click HOT 1
- Separator item
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-context.