simple-modal-vue

Simple Modal Vue

Very light and simple modal component for Vue

• 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.

Events

Name	Description
onOpen	Emits when modal is opened
onClose	Emits when modal is closed

Vesion

• 1.0.9 Fix some minor issues
• 1.0.5 Add unit test coverage 100%
• 1.0.1 Publish release