vue-modal-plugin

0.1.1 • Public • Published

vue-modal-plugin

Usage

npm install vue-modal-plugin --save

init modal

var Vue = require('vue'),
    VueModal = require('vue-modal-plugin');
 
// regist vue-modal plugin    
Vue.use(VueModal);
 
// initial vue-modal
var modal = Vue.modal({
  target: element // insert modal element into target element which is child element of target element.
  template: template, // vue-modal template, type string.
  data: {
 
  },
  methods:{
 
  },
  autoDestroy: false // when the value is true, you won't need to invoke destroy().
});

template

<div class="modal-mask" v-show="show" transition="bg" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="modal-wrapper">
        <div v-show="show" transition="modal" class="transition-wrapper">
            <div class="modal-container">
                <content select=".modal-header">
                 <!-- please don't change this expression -->
                    <div class="modal-header">
                        {{modal.title}}<span v-on:click="close()"></span>
                    </div>
                </content>
                <content select=".modal-body">
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="items notify-warn">
                                <p>{{modal.content}}</p>
                            </div>
                        </div>
                    </div>
                </content>
                <content select=".modal-footer">
                    <div class="modal-footer">
                        <button class="modal-button modal-cancel-button" v-on:click="updateData()">更新</button>
                        <button class="modal-button modal-cancel-button" v-on:click="confirm()">确定</button>
                    </div>
                </content>
            </div>
        </div>
    </div>
</div>

open

modal.open();

close

modal.close();

destroy

modal.destroy();

update

modal.udpate({
  // data
})

demo

http://demo.zfeng.net/vue-modal/index.html

Readme

Keywords

Package Sidebar

Install

npm i vue-modal-plugin

Weekly Downloads

1

Version

0.1.1

License

ISC

Last publish

Collaborators

  • zfeng