Simple-modal-vue NPM

Very light and simple modal component for Vue
No dependency required
No external CSS library required
Fully support on IE10, IE11, Edge, Firefox, Safari, Ipad Safari and Chrome of course
Fix scroll on Ipad

Install

npm install simple-modal-vue --save

yarn add simple-modal-vue --save

Usage

Usage in example

<template>
  <div>
    <simple-modal v-model="isShow" title="Modal Header">
      <template slot="body">
        <h2>My modal</h2>
        <input>
        <p>Hello you</p>
      </template>
      <template slot="footer">
        <button>OK</button>
      </template>
    </simple-modal>
    <button @click="isShow = !isShow">on off button</button>
  </div>
</template>

<script>
import SimpleModal from 'simple-modal-vue'
export default {
  name: 'SimpleModalExample',
  components: { SimpleModal },
  data() {
    return { isShow: false }
  },
}
</script>

Props and methods

Name	Required	Type	Default	Description
title	false	String		Name of the modal
hasButtonClose	false	Boolean	false	If true allows showing the button close on the modal
hasFooter	false	Boolean	false	If true allows showing the footer of the modal
size	false	String 'responsive', 'small', 'big'	'responsive'	If true allows resizing depend on config the modal window.