vue编写messageBox，使用函数调用

this.$messageBox({
text: '123123213',
callback:action=>{
console.log(action);//confirm(确定)cancel（确定）
}
})

import  messageBoxVue from './messageBox.vue'
export default {
install(Vue){
let messageBox = Vue.extend(messageBoxVue);
let $messageBox = new messageBox();
document.body.appendChild($messageBox.$mount().$el);
Vue.prototype.$messageBox = (model => {
model.show=true;
$messageBox.model=model;
});
}
}

<template>
<div>
<transition name="bounce">
<div v-show="model.show" class="messageBox">
<div class="messageBox_header">
<div class="messageBox_header_title">
提示
</div>
</div>

<div class="messageBox_content">
{{model.text}}
<div v-html="model.html"></div>
</div>
<div class="messageBox_btns">
<div class="messageBox_btns_default messageBox_btns_primary" @click="close('confirm')">确定</div>
<div class="messageBox_btns_default " @click="close('cancel')">取消</div>
</div>
</div>
</transition>
<div v-show="model.show" class="messageBox_model"></div>
</div>
</template>

<script>
export default {
name: 'messageBox',
data(){
return {
model: {
show: ''
}
}
},
methods: {
close(state){
this.model.show = false;
if(this.model.callback){
this.model.callback(state);
}
},
}
}
</script>

<style scoped>

.messageBox {
position: fixed;
z-index: 4;
left: 50%;
transform: translateX(-50%);
width: 420px;
border-radius: 4px;
background-color: #fff;

}

.messageBox_header {
padding: 20px 20px 0;
}

.messageBox_header_title {
padding-left: 0;
margin-bottom: 0;
font-size: 16px;
font-weight: 700;
height: 18px;
color: #333;
}

.messageBox_content {
padding: 30px 20px;
color: #48576a;
font-size: 14px;

}

.messageBox_btns {
padding: 10px 20px 15px;
text-align: right;
overflow: hidden;
}

.messageBox_btns_default {
user-select: none;
float: right;
padding: 8px 15px;
border: 1px solid #bfcbd9;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
}

.messageBox_btns_default:hover {
border-color: #1d90e6;
}

.messageBox_btns_primary {
color: #fff;
background-color: #20a0ff;
border-color: #20a0ff;
margin-left: 10px;
}

.messageBox_btns_primary:hover {
background: #4db3ff;
border-color: #4db3ff;
}

.messageBox_model {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .5;
background: #000;
}

@keyframes show-messageBox {
from {
opacity: 0;
}
to {
opacity: 1;

}
}

.bounce-enter-active {
animation: bounce-in .5s;
}

.bounce-leave-active {
animation: bounce-in .1s reverse;
}

@keyframes bounce-in {
from {
opacity: 0;
}
to {
opacity: 1;

}
}

</style>

import alert from './components/messageBox/messageBox.js'
Vue.use(alert);