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