vue弹窗制作

1、单独建立一个index.js

import Vue from 'vue'
import messageBox from '@/components/JS/messageBox'

export let MessageBox = (function () {
   let defaults = {//默认值
       title : '',
       content : '',
       cancel : '',
       ok : '',
       handleCancel : null,
       handleOK : null
    };

    let MyComponent = Vue.extend(messageBox);

    return function (opts) {//配置参数
        for(let attr in opts){
                defaults[attr] = opts[attr];
        }


        let vm = new MyComponent({
            el : document.createElement('div'),
            data:{
                title: defaults.title,
                content: defaults.content,
                cancel: defaults.cancel,
                ok : defaults.ok
            },
            methods:{
                handleCancel(){
                    defaults.handleCancel && defaults.handleCancel.call(this);
                    document.body.removeChild(vm.$el);
                },
                handleOK(){
                    defaults.handleOK && defaults.handleOK.call(this);
                    document.body.removeChild(vm.$el);

                }
            }
        });

        document.body.appendChild(vm.$el);
    };
})();

2、在页面调用

<template>
    <div class="messageBox">
        <h2>{{title}}</h2>
        <p>{{content}}</p>
        <div>
            <div @touchstart="handleCancel">{{cancel}}</div>
            <div @touchstart="handleOK">{{ok}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "messageBox"
    }
</script>

<style scoped>
    .messageBox{
        width: 200px;
        height: 140px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: white;
        box-shadow: 1px 1px 1px 1px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -70px 0 0 -100px;
    }
    .messageBox h2{
        text-align: center;
        line-height: 40px;
        font-size: 18px;
    }

    .messageBox p{
        text-align: center;
        line-height: 40px;
    }
    .messageBox > div{
        display: flex;
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .messageBox > div div{
        flex: 1;
        text-align: center;
        line-height: 30px;
        border-right: 1px solid #ccc;

    }
    .messageBox > div div:last-child{
        border: none;
    }
</style>

3、在哪里弹窗

 setTimeout(()=>{
                this.axios.get('/api/getLocation').then((res) =>{
                    let msg = res.data.msg;

                    if(msg === 'ok'){
                        let nm = res.data.data.nm;
                        let id = res.data.data.id;
                        //城市id一样的时候就不应该再弹了
                        if(this.$store.state.city.id == id){return}
                        MessageBox({
                            title:'定位',
                            content:nm,
                            cancel :'取消',
                            ok : '切换定位',
                            handleOK(){
                                window.localStorage.setItem("nowNm",nm);
                                window.localStorage.setItem("nowId",id);
                                window.location.reload();
                            }
                        })
                    }
                })
            },(300));