vue.extend 写弹窗

1、components/messageBox/index.vue

<template>
  <div :class="['message-box',type]">
    <div class="mask"></div>
    <div class="inner">
      <header class="header">
        <h1>{{title}}</h1>
        <div class="close" @click="hide">X</div>
      </header>
      <div class="content">{{content}}</div>
      <div class="bottom">
        <button @click="ok" class="left">确定</button>
        <button @click="no" class="right">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'MessageBox',
  props:{
    title:{
      type:String,
      default:'This is title'
    },
    content:{
      type:String,
      default:'This is content'
    },
    type:{
      type:String,
      default:'primary',
      validator:function(value){
        return ['primary','warning'].includes(value);
      }
    }
  },
  methods:{
    hide(){
      this.$messageBox.hide();
    },
    ok(){
      this.$messageBox.ok();
    },
    no(){
      this.$messageBox.no();
    }
  }
}
</script>

<style scoped>
 .message-box .mask{
     position:fixed;
     left:0;
     top:0;
     right:0;
     bottom:0;
     width: 100%;
     height: 100%;
     background:rgba(0,0,0,0.05);   
 }
  .message-box .inner{
    position:fixed;
    width: 500px;
    left: 50%;
    top:50%;
    background:#fff;
    transform: translate(-50%,-50%);
    padding: 20px;
  }
  .message-box .header{
    height: 45px;
    line-height: 45px;
    text-align: center;
    position: relative; 
  }
  .message-box .header h1{
    margin: 0;
  }
  .message-box .header .close{
    width: 20px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    right: 10px;
    top: 12px;
    cursor: pointer;
    margin: 0;
  }
  .message-box .bottom{
    height: 45px;
    line-height: 45px;
    display:flex;
    margin-top: 30px;
  } 
  .message-box .bottom button{
    flex: 1;
    display: block;
    border: 0;
    cursor: pointer;
    margin:0 10px;
  }
</style>

2、components/messageBox/index.js

import _MessageBox from './index.vue'

const MessageBox = {
    install(Vue){
       let messageBox = null;
       let $props = null;
       Vue.prototype.$messageBox = {
           show,
           hide,
           primary,
           warning,
           error,
           ok,
           no
       }
       function primary(props,callback){
        this.show({...props,type:'primary'},callback);
       }
       function warning(props,callback){
        this.show({...props,type:'warning'},callback);
       }
       function error(props,callback){
        this.show({...props,type:'error'},callback);
       }
       function show(props, callback){
            if(!messageBox){
                const MessageBox = Vue.extend({
                    render (h) {
                        return h(_MessageBox,{ props })
                    }
                })
                $props = props;
                messageBox = new MessageBox();
                this.vm = messageBox.$mount();
                document.body.appendChild(this.vm.$el);
                callback && callback();
            }
       }
       function hide(callback){
          document.body.removeChild(this.vm.$el);
          messageBox.$destroy();
          messageBox = null;
          $props = null;
          this.vm = null;
          callback && callback();
       }
       function ok(){
        $props.ok && $props.ok();
       }
       function no(){
        $props.no && $props.no()
        this.hide();
       }
    }
}

export default MessageBox

3、在main.js中调用

import Vue from 'vue'
import App from './App.vue'
import MessageBox  from './components/MessageBox/index'

Vue.config.productionTip = false
Vue.use(MessageBox);

new Vue({
  render: function (h) { return h(App) }
}).$mount('#app')

4、调用

<script>
export default {
  name:'App',
  mounted(){
    this.$messageBox.show({
      title:'标题111',
      content:'内容222',
      ok:function(){
        console.log('ok')
      },
      no:function(){
        console.log('no')
      }
    })
  }
}
</script>

5、效果