Package Exports

vue2-flexible-modal

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue2-flexible-modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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>