Skip to content

doginthehat/vue-transfer-dom

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 

Repository files navigation

vue-transfer-dom

requires Vue v2.+

Transfer DOM to another place (eg. <body>).

Useful in some situations such as z-index management, see discussion here.

Installation

npm install vue-transfer-dom

Usage

Vue.use(VueTransferDom /*, {name: 'transferDom'}*/)

new Vue({
  template: '<div v-transfer-dom>foo</div>', // div will be appended to body(default)
})

// prepend to body
new Vue({
  template: '<div v-transfer-dom.prepend>foo</div>', // div will be prepended to body(default)
})

Move to a specific target element identifed by target's id:

// append to specific place
new Vue({
  template: '<div v-transfer-dom:bar>foo</div>', // div will be appended to #bar(document.getElementById)
})

// prepend to specific place
new Vue({
  template: '<div v-transfer-dom:bar.prepend>foo</div>', // div will be prepended to #bar(document.getElementById)
})

Note: If appending or prepending to a non-existant target element, a console warning will be fired and the element will not be moved.

Credits

Based on https://github.com/rhyzx/vue-transfer-dom for Vue 1.x

About

Transfer DOM to another place in Vue 2

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%