simple-modal-vue
Advanced tools
Build an extremely easy modal component in Vuejs
Weekly downloads
Readme
Very light and simple modal component for Vue
npm install simple-modal-vue --save
yarn add simple-modal-vue --save
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>
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. |
Name | Description |
---|---|
onOpen | Emits when modal is opened |
onClose | Emits when modal is closed |