shapla-modal v2.1.0

shapla-modal

A classic modal overlay for Vue.js, in which you can include any content you want.

Table of contents

• Installation
• Usage

Installation

npm install --save shapla-modal

Usage

Add the component:

import modal from 'shapla-modal';

export default {
  name: 'Hello',

  components: {
    modal
  },

  data () {
    return {
        modalActive:true,
    };
  },
  
  methods: {
    closeModal(){
      this.modalActive = false;
    }
  }
}

<button @click="modalActive = true">Open Modal</button>
<modal :active="modalActive" title="Modal Title" content-size="full" @close="closeModal">
    Modal content goes here.
    <div slot="foot">
        <button @close="closeModal">Close</button>
    </div>
</modal>

Props

Listeners

The modal component fires the following events:

close: When close icon or outside content area is clicked, it fires the event.

<!-- template -->
<modal @close="closeModal">
</modal>


<!-- method -->
methods: {
  closeModal(){
    this.modalActive = false;
  }
}