vue2-flexible-modal v0.0.1

vue-flexible-modal

a flexible modal component by vue.js

Live Demo

Installation

First, install vue2-flexible-modal from npm:

$ npm install vue2-flexible-modal

Then 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

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>