vue-flexible-modal

a flexible modal component by vue.js

Live Demo

Installation

First, install vue-flexible-modal from npm:

$ npm install vue-flexible-modal

Then import it:

import Modal from 'vue-flexible-modal';

Usage

Please view the detail code in example folder

<script>
    import Modal from 'vue-flexible-modal';
    export default {
        el: '#page',
        components: {
            Modal
        },
        events:{
            MODAL_OK_EVENT(){
                // you can set modal show or hide with the variable 'this.modal.visible' manually
                // this.modal.visible = false;
            },
            MODAL_CANCEL_EVENT(){
 
            }
        },
        data:{
            modal:{
                title:'I am modal title',
                visible:false,
                text:''
            }
        },
        methods:{
            onShowModal(){
                this.modal.visible = !this.modal.visible;
            }
        }
    };
</script> 
<template>
    <div>
        <button @click="onShowModal">Click Show Modal</button>
        <modal :title="modal.title" :visible.sync="modal.visible" :bg-click="false" :verify="true">
            <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" :visible.sync="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" :visible.sync="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>