安装：

npm install vue-js-modal --save

Include plugin in your main.js file

import VModal from 'vue-js-modal'

Vue.use(VModal, { dynamic: true, injectModalsContainer: true, dynamicDefaults: { clickToClose: true } });

main.js

import Vue from 'vue';
import router from './router'
import App from './App.vue';
import store from './store'
// 导入 table 和 分页组件
import { VTable, VPagination } from 'vue-easytable'
//vue-js-modal
import VModal from 'vue-js-modal'

// 注册到全局
Vue.component(VTable.name, VTable);
Vue.component(VPagination.name, VPagination);

//vue-js-modal
Vue.use(VModal, { dynamic: true, injectModalsContainer: true, dynamicDefaults: { clickToClose: true } });

Vue.config.productionTip = true;

Vue.filter('capitalize', function(value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
});


new Vue({
    router: router,
    store,
    render: h => h(App)
}).$mount('#app');

Home.vue

<template>
  <div>
        <SignedInUser />
    <router-link :to="{name:'welcome'}">to welcome</router-link><br/>
    <router-link :to="{name:'table'}">to vuetable-2</router-link><br/>
    <button v-on:click="showModal">showModal</button>
  
    <br/>
    <div>
      Name:<input type="text" v-model="product.name">
      <div>
        <span>{{product.name | capitalize}}</span>
      </div>
    </div>
    <div>
      Leves:<label>高</label> <input type="checkbox"  value="H" v-model="product.leves"/>
      <label>中</label> <input type="checkbox"  value="M" v-model="product.leves"/>
      <label>低</label> <input type="checkbox"  value="L" v-model="product.leves"/>
    </div>
    <div>
      <button v-on:click="show">show</button>  <br/> 
      <button v-on:click="request">requestApi</button>
    </div>
    <h1>Lazy</h1>
    <div>
      <div><input type="text" v-model="product.price" lazy debounce="5000"></div>
      <div>showPrice:{{product.price}}</div>
      <div>ComputedResult:{{total}}</div>
    </div>

    <ul v-for="(item, index) in product.leves " :key="index">
      <li >{{index}}{{item}}</li>
    </ul>
  </div>

</template>

<script>
    import SignedInUser from './SignedInUser.vue'
    import axios from '../config/axios.js'
    import ModalDemo from './ModalDemo.vue'

    export default {
        name: 'Home',
        components: {
            SignedInUser
        },
        data() {
            return {
                product: {
                    name: "xiaomi",
                    leves: ["M", "L"],
                    price: 100
                }
            }
        },
        methods: {
            show: function() {
                alert(JSON.stringify(this.product));
            },
            showModal() {
                this.$modal.show(ModalDemo, {
                    text: 'This text is passed as a property'
                }, {
                    draggable: true,
                    clickToClose: false
                })
            },
            request: function() {
                axios.get('/values')
                    .then(function(response) {
                        console.info(response);
                    })
                    .catch(function(error) {
                        console.debug(error);
                    });


                axios.post('/values', JSON.stringify({
                        name: "hiword"
                    }))
                    .then(function(response) {
                        console.info(response);
                    })
                    .catch(function(error) {
                        console.debug(error);
                    });

                axios.put('/values/123', JSON.stringify({
                        name: "hiword"
                    }))
                    .then(function(response) {
                        console.info(response);
                    })
                    .catch(function(error) {
                        console.debug(error);
                    });

                axios.delete('/values/123')
                    .then(function(response) {
                        console.info(response);
                    })
                    .catch(function(error) {
                        console.debug(error);
                    });
            }
        },
        computed: {
            total: function() {
                return this.product.price * 0.283;
            }
        }
    };
</script>

<style scoped>

</style>

ModalDemo.vue

<template>
     <div>
      Close using this button: 
     <button v-on:click="$emit('close')">Close</button>
      </div>
</template>
<script>
    export default {

    }
</script>

<style scoped>

</style>

运行效果：

参考文献：

vue-js-modal - npm