rhyzx / vue-transfer-dom Goto Github PK

View Code? Open in Web Editor NEW

64.0 5.0 21.0 3 KB

Transfer DOM to another place.

JavaScript 100.00%

vue-transfer-dom's Introduction

vue-transfer-dom

requires Vue v1.0.19+

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

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

Demo (prevent modal overlap by other elements)

http://jsfiddle.net/rhyzx/br5cepu3/

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)
})

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

vue-transfer-dom's People

Contributors

Stargazers

Watchers

Forkers

kazupon cuulee julienzakaib arrowgamer tmorehouse jahon maogongzi wooodhead jaenudin86 elefantz olivierceulemans momoirocloverz rvidis

vue-transfer-dom's Issues

[Feature Request] Support Vue 2

Hello,

Do you have any plans on porting this to Vue 2?

Better support for usage inside the component template

Consider the following example, where we can have the v-transfer-dom directive applied to the main template element of the modal component directly, so it will always transfer the modal to the body without having to explicitly use the directive on the modal component:

http://jsfiddle.net/lazabogdan/wobmzd87/

The example above works only in combination with v-if applied to the main template element of the modal component. If you'd replace v-if with v-show, it won't work and v-if feels more like a hack to make this work.

Let me know what you think.

Conflict with Vue.mixin

Vue has a syntax for defining global mixins, Vue.mixin({ ... }). Some libraries use it to inject global hooks into components.

Now, if Vue.mixin was ever applied before Vue.use(VueTransferDom), then a runtime error appears.
But If Vue.mixin is applied after Vue.use(VueTransferDom), then the error goes away.

Repro: https://jsfiddle.net/ujafg3js/1/

transferred element loses dom event bindings

Clicking on the button or image fails to trigger the event handler.

`root`

<template>
  <div id="root"></div>
</template>

`components/complex-button`

<template>
  <a class="complex-button"><slot></slot></a>
</template>

`states/a-page`

<template>
  <div class="state__some-page">
    <header>Page Title</header>
    <article>
      <complex-button
        v-transfer-dom:root
        v-on:click="foo">Foo</complex-button>

      <img src="//placehold.it/50x50"
        v-transfer-dom:root
        v-on:click="foo"
        alt="a root transferred image">

    </article>
    <footer></footer>
  </div>
</template>
<script>
export default {
  methods: {
    foo () {
      console.log('bar');
    }
  }
};
</script>

Attribute "v-transfer-dom" is ignored

I get this warning when using this attribute on production. On local environment I don't see this warnings.

[Vue warn]: Attribute "v-transfer-dom" is ignored on component because the component is a fragment instance

I also tried to use it on a root element but then I get this:

v-transfer-dom="" cannot be used on an instance root element.