Skip to content
A simple modal plugin for vue.js
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.gitignore
README.md
index.js
package.json
webpack.config.js

README.md

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 https://miaowing.me/vue-modal/example/index.html

You can’t perform that action at this time.