Components

vc-modal

Install

npm install vc-modal --save
// build version
import vcModal from 'vc-modal'
// recommend for *.vue project for small bundle size
import vcModal from 'vc-modal/src/Modal.vue'
// commonjs
require('./dist/build.min.js')
// script tag
<script src='./dist/build.min.js'></script>

Usage

props

show

title

showCloseBtn

maskCloseable

showHeader

showFooter

width

top

center

okText

cancelText

onOk

onCancel

effect

backdrop

large

small

example

import Vue from 'vue'
import vcModal from '../src'
new Vue({
    el: '#app',
    data () {
        return {
            bools: {
                'true': true,
                'false': false
            },
            title: 'title',
            show: true,
            center: false,
            small: false,
            large: true,
            showCloseBtn: true,
            showHeader: true,
            showFooter: true,
            effect: 'fade',
            width: '',
            top: '',
            okText: '确认',
            cancelText: '取消',
            maskCloseable: true
        }
    },
    components: {
        vcModal
    }
})
<vc-modal
    :show.sync="show"
    :small="small"
    :title="title"
    :effect="effect"
    :center="center"
    :show-close-btn="showCloseBtn"
    :mask-closeable="maskCloseable"
    :show-header="showHeader"
    :show-footer="showFooter"
    :width="width"
    :top="top"
    :ok-text="okText"
    :cancel-text="cancelText"
    :on-ok="onOk"
    :on-cancel="onCancel"
>
    <div slot="modal-header" class="modal-header">
        content of header 
    </div>
    <div slot="modal-body" class="modal-body">
        content
    </div>
    <div slot="modal-footer" class="modal-footer">
        content of footer 
    </div>
</vc-modal>