vue-flexible-modal
a flexible modal component by vue.js
Installation
First, install vue2-flexible-modal from npm:
$ npm install vue2-flexible-modalThen import it:
import Modal from 'vue2-flexible-modal';Usage
Please view the detail code in example folder
<script>
import Modal from 'vue2-flexible-modal';
export default {
components: {
Modal
},
data:{
modal:{
title:'I am modal title',
visible:false,
text:''
}
},
methods:{
onShowModal(){
this.modal.visible = !this.modal.visible;
},
MODAL_OK_EVENT(){
// you can set modal show or hide with the variable 'this.modal.visible' manually
// this.modal.visible = false;
},
MODAL_CANCEL_EVENT(){
}
}
};
</script>
<template>
<div>
<button @click="onShowModal">Click Show Modal</button>
<modal :title="modal.title" v-model="modal.visible" :bg-click="false" :verify="true" @MODAL_OK_EVENT="MODAL_OK_EVENT" @MODAL_CANCEL_EVENT="MODAL_CANCEL_EVENT">
<p class="control">
<label class="label">Name:</label>
<input class="input" type="text" v-model="modal.text" placeholder="Your name">
</p>
</modal>
</div>
</template>API
| Option | Description | Value | Default |
|---|---|---|---|
| title | Modal Title | String | 'Modal' |
| okText | ok button text | String | 'ok' |
| cancelText | cancel button text | String | 'cancel' |
| visible | control the modal show or hide(primary key) | Boolean | 'false' |
| transition | modal show or hide with your custom animation/transition | String | 'bounce' |
| verify | if need verify form data when click ok button | Boolean | 'false' |
| bgClick | the switch for hiding modal by clicking background | Boolean | 'true' |
| onlyBody | hide the modal head and foot,only show body content | Boolean | 'false' |
| bgStyle | custom set background style | Object | {} |
| contentStyle | custom set content style | Object | {} |
| bodyStyle | custom set body style | Object | {} |
| modalId | modalId | String | '' |
| topGap | custom set body top style | Number | 0 |
Usage Example
simple
<modal :title="modal.title" v-model="modal.visible" :verify="true">
<label class="label">Slot Area,write your code in here</label>
<p class="control">
<label class="label">Name:</label>
<input class="input" type="text" v-model="modal.text" placeholder="Your name">
</p>
</modal>Use api params to configure a MessageBox
<modal :title="modal2.title" v-model="modal2.visible" :bg-click="false" :verify="true" :bg-style="modal2.bgStyle" :content-style="modal2.contentStyle" :only-body="true" :modal-id="1">
<label class="label">Welcome to use vue-flexible-modal</label>
<p class="control">
<button class="ok" @click="onShowModal2">ok</button>
</p>
</modal>
