v-portal v0.1.0

Vue Portal Component

This is a simple component for someone who wants render component outside the DOM structure

Installation

npm i v-portal

import Portal from 'v-portal'
Vue.use(Portal)

Usage

<template>
  <div class="parent">
    <button @click="isShow = !isShow">{{ isShow ? 'hide' : 'show' }}</button>
    <Portal v-if="isShow" class="classA" data-custom="any">
      <button>content button</button>
    <Portal/>
  </div>
</template>

<script>
export default {
  data() {
    return { isShow: true }
  }
}
</script>

The template above will render as below, and you can control the condition render by toggling the button

<div class="parentA">
  <button>hide</button>
</div>
<div role="portal" class="classA" data-custom="any">
  <button>content button</button>
</div>