封装一个弹出框组件,类似于element中的messageBox
vue样式组件
<template>
<div class="message_page" v-show="isShow" @click="otherClick" ref="confirmBox">
<p>{{title}}</p>
<p>{{content}}</p>
<div class="btn">
<button type="button" @click="confirm">{{btn1}}</button>
<button type="button" @click="cancel">{{btn2}}</button>
</div>
</div>
</template>
<script>
export default{
props:{
title:{
type:String,
default:'提示'
},
content:{
type:String,
default:'确认退出登录吗'
},
confirmBtn:{
type:String,
default:'确认'
},
cancelBtn:{
type:String,
default:'取消'
}
},
data(){
return {
isShow:false,
promiseStatus:null
}
},
methods:{
initMessageBox(){
let _this = this
this.show = true
return new Promise(function(resolve,reject){
_this.promiseStatus = {resolve,reject}
})
}
otherClick(){
// 点击其他区域隐藏弹出框
let confirmBox = this.$refs.confirmBox
if(e.target.contains(confirmBox)){
this.cancel()
}
},
cancel(){
this.show = false
this.promiseStatus&&this.promiseStatus.reject()
},
confirm(){
this.show = false
setTimeOut(()=>{
this.show = false
},300)
this.promiseStatus&&this.promiseStatus.resolve()
}
}
}
</script>
<style>
// 样式
</style>
创建index.js文件
import Vue from 'vue'
Import Message from './message'
const MessageComponent = Vue.extend(Message)
const vm = new MessageComponent().$mount()
let init = false
const message = function(){
Object.assign(vm,option,{
type:'confirm'
})
if(!init){
document.body.appendChild(vm.$el)
init = true
}
return vm.initMessageBox()
}
export default message
在main.js中全局引入
import MessageBox from './index.js'
Vue.prototype.$Message = MessageBox
接下来就可以全局中使用$Message 调用组件了
例如
this.$Message({title:'警告',content:'请先登录'}).then(()=>{
// 处理确认后的逻辑事件
}).catch((err)=>{console.log(err})