Vue: transfer DOM

[rhyzx]

We may need DOM place in some other location in some situations, eg: place <modal> in root element(body).

position: fixed is not a perfect solution, when inside parent with z-index, it may be overlap by other elements: http://stackoverflow.com/a/16756277

I made some experiments and it seems impossible to achieve this by custom directive, so i made some modifications in source code and it works as expected:
http://jsfiddle.net/rhyzx/s3L0emxy/

commit is here: https://github.com/rhyzx/vue/commit/8430843342beed71953da8de00c87dd45cbb250b

How do you think about this feature? @yyx990803

[yyx990803]

Thanks for the suggestion! This is definitely useful, however my concern is:

1. The rendered DOM structure would be different from the template structure;
2. The use case is a bit narrow for a new core directive: it is only necessary when we don't have control over the z-index of our app element on the page.

[rhyzx]

1. The rendered DOM structure would be different from the template structure;
2. The use case is a bit narrow for a new core directive: it is only necessary when we don't have control over the z-index of our app element on the page.

That's true. this is a edge case and seems no perfect way to solve, eg. bootstrap's solution: http://v4-alpha.getbootstrap.com/components/modal/#live-demo , by this way, modal's lifecycle is not inherit from parent and not context aware. ng's solution is little cumbersome: https://angular-ui.github.io/bootstrap/#/modal .

How about providing some ways(may be an API) to extending this feature?

[yyx990803]

Yeah, it definitely should be extendable... I think the only thing preventing it is the internal terminalDirectives array, since both util and FragmentFactory are exposed already.

[yyx990803]

So, with be0d1cd75b4d84ece2b97cac5701376070884ab2 you should have everything you need to implement v-inject as a third party directive:

• Vue.FragmentFactory
• Vue.util
• Vue.compiler.terminalDirectives

I'll close this now - feel free to share v-inject and add it to awesome-vue :)

[rhyzx]

Great, thanks.

[geraldlrh]

how vue2.0 to transfer dom like this?