Vue-pop-modal NPM

vue-pop-modal

A slim pop-modal component for Vue.js

Install

$ npm install vue-pop-modal --save

Usage

Non-fixed height

Demo

<pop-modal v-if="showModal" v-on:close="closeModal" v-on:cancel="showModal=false">
    <p slot="header">
        {{ myHeader }}
    </p>
    <div slot="body">
        {{ myContent }
    </div>
    <p slot="header">
        {{ myFooter }}
    </p>
</pop-modal>

Fixed height and enable scrollbar for long content

Demo

<pop-modal v-if="showModal" is-fix="true" v-on:close="closeModal" v-on:cancel="showModal=false">
    <p slot="header">
        {{ myHeader }}
    </p>
    <div slot="body">
        {{ myContent }
    </div>
    <p slot="header">
        {{ myFooter }}
    </p>
</pop-modal>

Props

Property	Description	Type	Default
isFix	"true" for fixed modal or "false" for non-fixed modal.	String	"false"
disableOk	Disable OK button, usually used for form validation.	Boolean	false
textOk	The display text for Ok button	Boolean	false

Events

Name	Description
close	Emits while user clicks on the Ok button, often emits a callback to save the content in the Modal
cancel	Emits while user clicks on the mask area outside the pop-up modal