通过Vue.extend()创建全局公共弹窗组件

一.需求

效果：

——在项目中需要将antd vue中的this.$message全局提示框全部改成弹窗，需要用户自己进行关闭
思路：
——思路1:通过传统的方式创建一个全局组件，即通过组件注册和通过组件标签进行引入的形式
——思路2：重新书写一个this.$message方法，将原来的方法进行覆盖
解决方案：
——我通过在element-ui框架中找到了相应的组件可以进行代替，且同样是通过方法进行调用的形式
——思路1存在缺陷，如果注册和调用一个全局组件，则项目将会出现大量的代码结构需要进行更改，且会相当麻烦
——思路2可行，可重新书写一个全局方法，来进行组件的调用

二.创建全局组件的步骤

虽然通过element-ui将问题解决，但能自己动手进行封装，当然就自己动手进行封装比较好滴
步骤：
1.创建一个弹窗组件Vue文件,书写组件的内容和样式
confirm.vue（弹窗组件内容）
——通过对象的方式来进行内容的导入，这将会对之后的对弹窗的逻辑有很大帮助
——弹窗组件中的点击 “确定ok”时的除弹窗组件外，周围的背景将会变暗
此时的解决方法：
#confirm{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.3);
}
——通过定位后，将left,right,bottom,top都设置成0的作用
——1.对有明确的宽高的盒子进行垂直水平居中，可以理解成四个力都在拉着盒子，此时的盒子是出于平衡的

2.让无宽高的盒子填满整个父容器，相当于左边距，右边剧，上下边距都为0

<template>
  <div id="confirm" v-if='flag'>
      <div class="contents" >
          <div class="content-top">{{text.title}}</div>
          <div class="content-center">{{text.msg}}</div>
          <div class="content-bottom">
              <el-button type='primary' @click='ok' class="left">{{text.btn.ok}}</el-button>
              <el-button type='info' @click='no' class="right">{{text.btn.no}}</el-button>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        flag:true,
        text:{
            title:'标题',
            msg:'这是一个弹出框组件',
            btn:{
                ok:'确定',
                no:'取消'
            }
        }
    }
  },
  methods: {
      ok(){
          this.flag=false;
      },
      no(){
          this.flag=false;
      }
  }
}
</script>

<style scoped>
 #confirm{
     position:fixed;
     left:0;
     top:0;
     right:0;
     bottom:0;
     background:rgba(0,0,0,0.3);   
 }
 .contents{
    width:250px;
    height:180px;
    border:1px solid #ccc;
    border-radius:10px;
    background-color:#fff;
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-90px;
    margin-left:-125px;
}
.content-top{
    width:100%;
    height:40px;
    border-bottom:1px solid #ccc;
    text-align: center;
    font-size:20px;
    font-weight: 700;
    line-height:40px;
}
.content-center{
    width:90%;
    height:80px;
    margin:5px auto;
}
.content-bottom{
    width:85%;
    height:40px;
    margin:0 auto;
    /* border:1px solid red; */
    position:relative;
}
.left{
    position:absolute;
    left:0;
    width:40%;
}
.right{
    position:absolute;
    right:0;
    width:40%;
}
</style>

2.创建一个js文件，用来设置弹窗组件的事件逻辑
——不得不说一下，想通过函数方式进行调用组件，则只能通过Vue.extend()来进行组件的导入和创建组件构造器
Vue.extend返回的是一个扩展实例构造器，也就是预设了部分选项的Vue实例构造器。
——此返回的Vue实例构造器，则需要进行挂载到页面中才能使用和显示
——任何通过Vue.extend()方式创建，必须要将之挂载到页面中去
——其主要用来服务于Vue.component，用来生成组件
——可以简单的理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用扩展实例构造器来生产组件实例，并挂载到自定义元素上。

import Vue from 'vue'
import Confirm from './confirm.vue'

let confirmStructor=Vue.extend(Confirm)   //返回一个实例创建的构造器，但实例构造器需要进行挂载到页面中

let theConfirm=function(text){
    return new Promise((res,rej)=>{       //返回一个promise，进行异步操作，成功时返回，失败时返回
        let confirmDom=new confirmStructor({
            el:document.createElement('div')
        })
        //在body中动态创建一个div元素，之后此div将会替换成整个vue文件的内容
        //此时的confirmDom通俗讲就是相当于是整个组件对象，通过对象调用属性的方法来进行组件中数据的使用
        //可以通过$el属性来访问创建的组件实例
        document.body.appendChild(confirmDom.$el)

        //此时进行创建组件的逻辑处理
        confirmDom.text=text       //将需要传入的文本内容传给组件实例
        confirmDom.ok=()=>{     //箭头函数，在（）和{}之间增加=>,且去掉function
            res()   //正确时返回的操作
            confirmDom.flag=false;
        }
        confirmDom.no=()=>{
            rej()   //失败时返回的操作
            confirmDom.flag=false;
        }    
    })
}

//将逻辑函数进行导出和暴露
export default theConfirm

3.挂载和添加到Vue的原型上去
在main.js文件中进行引入和挂载到原型上去
import TheConfirm from ‘./confirm.js’
Vue.prototype.$confirm=theConfirm

//最后将此组件的逻辑函数添加到vue的原型中去，使之能进行全局调用和直接调用，当调用时，就是执行逻辑函数中的内容
//在main.js中进行挂载，挂载到vue的原型上
//使用
// this.$confirm({
//     title:'标题',
//     msg:'内容',
//     btn:{
//         ok:'确定',
//         no:'取消'
//     }
// }).then(()=>{
//     console.log('ok')
// }).catch(()=>{
//     console.log('no')
// })

//使用全局组件的方法
import theConfirm from './common/confirm/confirm.js'
Vue.prototype.$Myconfirm=theConfirm