vfm

vue-flexible-modal

a flexible modal component by vue.js

Showing:

Popularity

Downloads/wk

11

Maintenance

No Maintenance Data Available

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

OptionDescriptionValueDefault
titleModal TitleString'Modal'
okTextok button textString'ok'
cancelTextcancel button textString'cancel'
visiblecontrol the modal show or hide(primary key)Boolean'false'
transitionmodal show or hide with your custom animation/transitionString'bounce'
verifyif need verify form data when click ok buttonBoolean'false'
bgClickthe switch for hiding modal by clicking backgroundBoolean'true'
onlyBodyhide the modal head and foot,only show body contentBoolean'false'
bgStylecustom set background styleObject{}
contentStylecustom set content styleObject{}
bodyStylecustom set body styleObject{}
modalIdmodalIdString''
topGapcustom set body top styleNumber0

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>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100