Simple modal vue

Build an extremely easy modal component in Vuejs

Version: 1.0.12 Updated: 12/18/2018

By: toannt181 License: MIT

Downloads Last 30 Days: 210

Simple Modal Vue

Very light and simple modal component for 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.

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
Categories: Vue js