Flexible Modal Component For Vue.js

Flexible Modal Component For Vue.js

An animated flexible modal & popup component for Vue applications.

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>

Github Repository

Tags: #VueJs