November: Procrastination Month

    vue-portal-class

    0.0.4 • Public • Published

    Portals

    Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

    Example

    import Portal from '../src/Portal';
    import { cloneVNode } from './VueHelper';
     
    export default {
      name: 'PortalExample',
      props: {
        showPortal: {
          type: Boolean,
          default: false
        }
      },
     
      methods: {
        renderPortal(h) {
          if(!this.showPortal) {
            return null;
          }
          
          return cloneVNode(this.$slots.default, h);
        }
      },
      
      beforeMount() {
        // Portal will be attach to div#portal-root
        // If no node is found, Portal will create div#portal-root
        // at the end of document.body
        this.portal = new Portal('portal-root', this.renderPortal);
     
        // Or you may pass an element 
        /* 
          const root = document.createElement('div')
          root.setAttribute('id', 'fresh-root');
          document.body.append(root); // You may bind it to something else than body
          this.portal = new Portal(root, this.renderPortal);
        */
          
        // this.portal = new Portal(document.querySelector('.other-portal-root'), this.renderPortal);
      },
     
      destroyed() {
        // It will destroy the portal if no other components is using it
        this.portal.unmount();
      },
      
      render(h) {
        // Trigger the portal renderer
        this.portal.update();
     
        return h('div', 'I am rendering with the normal flow without portal');
      }
    }

    Keywords

    Install

    npm i vue-portal-class

    DownloadsWeekly Downloads

    5

    Version

    0.0.4

    License

    ISC

    Unpacked Size

    18 kB

    Total Files

    7

    Last publish

    Collaborators

    • karlito40