README
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>