vue中extend用法

通过extent拓展全局组件

首先在MessageBox.vue中做好模板

<template>
    <div class="MessageBox">
        <h3>{{ title }}</h3>
        <p>{{ message }}</p>
        <div>
            <div v-if="confirm" @click="handleConfirm">{{ confirm }}</div>
            <div v-if="cancel" @click="handleCancel">{{ cancel }}</div>
        </div>
    </div>
</template>

<script>

export default {
    name:"MessageBox",
    data(){
        return {
            title:"",
            message:"",
            confirm:"",
            cancel:"",
        }
    },
    methods:{
        handleConfirm(){

        },
        handleCancel(){
            
        }
    }
}

</script>
<style lang='scss' scoped>
    .MessageBox{
        width:70%;
        padding: 10px;
        border: 1px solid #ccc;
        position: absolute;
        top: 30% ;
        left: calc(15% - 10px);
        z-index: 10;
        background: #fff;
        box-shadow: 3px 3px 3px 3px #ccc;
        h3{
            text-align: center;
        }
        p{
            padding: 5px 10px;
            margin: 15px 0;
        }
        & > div{
            display: flex;
            justify-content: space-around;
            div{
                width: 50%;
                text-align: center;
                border: 1px solid #000;
            }
        }
    }
</style>

在js文件中

import Vue from "vue";
import MessageBox from './MessageBox';

export var messageBox = (function(){

    return function( options ){
        let defaults = {
            title:"标题",
            message:"message",
            confirm:"确定",
            cancel:"",
            handleConfirm:null,
            handleCancel:null
        }
        var Component = Vue.extend(MessageBox);
        for(let key in options){
            defaults[key] = options[key];
        }
        let { title,message,confirm,cancel } = defaults;
        var vm = new Component({
            el:document.createElement("div"),
            data(){
                return {
                    title,
                    message,
                    confirm,
                    cancel
                }
            },
            methods:{
                handleConfirm(){
                    defaults.handleConfirm && defaults.handleConfirm.call(this);
                    document.body.removeChild( vm.$el );
                },
                handleCancel(){
                    defaults.handleCancel && defaults.handleCancel.call(this);
                    document.body.removeChild( vm.$el );
                }
            }
        })
        document.body.appendChild(vm.$el)
    }
})();

使用的时候直接在组件中引入

import { messageBox } from "./js";

messageBox({
	title:"aaaa",
	message:"hello",
	confirm:"确定",
	cancel:"取消"，
	handleConfirm(){},
	handleCancel(){}
})

css样式自己美化一下就可以了