transfer DOM
rhyzx opened this issue · comments
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: rhyzx@8430843
How do you think about this feature? @yyx990803
Thanks for the suggestion! This is definitely useful, however my concern is:
- The rendered DOM structure would be different from the template structure;
- 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-indexof our app element on the page.
- The rendered DOM structure would be different from the template structure;
- 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?
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.
So, with be0d1cd75b4d84ece2b97cac5701376070884ab2 you should have everything you need to implement v-inject as a third party directive:
Vue.FragmentFactoryVue.utilVue.compiler.terminalDirectives
I'll close this now - feel free to share v-inject and add it to awesome-vue :)
Great, thanks.
how vue2.0 to transfer dom like this?