-
-
Notifications
You must be signed in to change notification settings - Fork 186
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support multiple portals sending content to one target at the same time #26
Comments
Hey, thanks for your request! I have thought about this as well, good to see there's a use case for this. However, I have to think how to implement this, or a similar API. I don't think that So if we implement this, it should be possible to add any number of portals and give each one a position number, priority or something. Will think about this, but will be offline for pretty much all of the next week due to vacation. Thanks again! |
I think I found a nice API for this, currently testing... |
Is it possible to have multiple I'm thinking of a re-usable modal, where multiple content would be able to use the same modal base structure? Or maybe have a |
Yes, you use the same target even right now. Just make sure that only one source portal is active at a time, because theblatestbome will always overwrite the previously rendered ones' content. This issue here is about offering a possibility to render multiple sources portals in the same a target together, which I am still working on |
Looking forward to this feature! |
I may still take a while, it's a bit tricky to get right. |
I've moved this to the 1.1.0 Milestone, because it's really more of a complete rewrite of the core functionality and I want to take some time to test this through properly. Will now concentrate more on finally getting rid of the beta status and release a stable 1.0.0 |
I would love to see this too. My use case is a My current solution is to dynamically create target elements for each instance. (I'm using jQuery, but it could be converted to use <script>
import $ from 'jquery';
let portalNumber = 1;
export default {
data()
{
return {
portalId: null,
showDropdown: false,
};
},
mounted()
{
this.portalId = 'form-select-portal-' + portalNumber++;
$('<div>').attr('id', this.portalId).appendTo('body');
},
beforeDestroy()
{
$('#' + this.portalId).remove();
},
// ...
}
</script>
<template>
<div class="form-select">
<div class="form-select-current" @click="toggleDropdown">
...
</div>
<portal :target-el="'#' + portalId" v-if="showDropdown">
<div class="form-select-dropdown">
...
</div>
</portal>
</div>
</template> |
@LinusBorg I have the same idea as @davejamesmiller described. It would be very nice) |
I'm working on it, now that 1.1 is out and the internals are cleaned up. It might take a while though, I wanna get the API right for different use cases. |
Thanks @LinusBorg ) Your plugin is really useful! |
Hey @LinusBorg, great work on this package. Another use case for this would be for an overlay modal on top of another modal. I just tried it and like you explained the portal is re-rendered. Thanks! |
I'd just like to add my 👍 to this request. Using portal for modals would be perfect, however this isn't possible right now when you have more than one modal on a page. |
@reinink I've kinda hacked it for now by doing the following:
So I now select the different levels depending on whether it could conflict etc. An idea maybe for now? :) |
I just want to add my use-case for this: I have multiple select dropdowns and tooltips which need to be appended to The selects and tooltips are components in a library, so they need to dynamically create their portal-target as they cannot assume one is already present in whatever app they are used in. Portal-vue would have to either use an existing target-el or create it if not present. For this scenario I really don't care what order the elements are in in the portal-target. We are now using vue-dom-portal, and were hoping portal-vue would be able to solve some issues we had with that plugin :) |
Faced the task of putting content from different components of vue into one target. This functionality is very necessary. |
For what it's worth, I've managed to sidestep this requirement by using v-if for my modals instead of v-show. With v-if, only one modal actually lives within a portal at one time, and everything works as expected. Obviously this is okay with modals (since you only ever have one visible), but may not be a suitable solution in other situations. |
I will close this in favour of #76, where I outlined how I intend to solve this. Further discussion can take place in the new issue. Thanks for everyone that joined in so far! |
I'd like to be able to append multiple portals to single portal-target (like Jade-blocks does).
Here are some examples:
My use-case.
I have a page like:
http://joxi.ru/E2pbGWvF98nNdr
And I want to create under-nav panels dynamically:
http://joxi.ru/DrlpJ7aFvJWw3r
The text was updated successfully, but these errors were encountered: