1.编写弹框样式的组件。
2.弹框页面逻辑的处理。
3.全局挂载到vue这个对象上，方便全局调用
4.调用
第一步编写名为confirm的页面，弹框的样式可在此页面自定义

<template>
	<div class="modal" v-if="isShow">
		<div class="main">
			<p class="msg">{{text.msg}}</p>
			<div class="btnBox">
				<span @click="close">{{text.btn.no}}</span>
				<span @click="ok"">{{text.btn.ok}}</span>
			</div>
		</div>
	</div>
</template>
<script>
export default {
    data(){
        return{
            isShow:true,
            text:{
                type:'提示',              
                msg:'',
                btn:{
                    ok:'确定',
                    no:'取消'
                },
            }
        }
    },
    methods:{
        close(){
            this.isShow=false;
        },
        ok(){
            this.isShow=false;
        },
    }
}
</script>
<style scoped>
.modal{
		position: absolute;
		width:100%;
		height:100%;
		background: rgba(0,0,0,0.89);
		top:0;
		left:0;
		z-index:99;
	}
	.main{
		position: absolute;
		width:80%;
		height:3.7rem;
		background: url(xxx.png)no-repeat left center;
		background-size:100% 100%;
		left:10%;
		top:50%;
		margin-top:-1.85rem;
		color:#fff;
		padding:0.72rem 1.03rem;
	}
	.msg{
		font-size:0.32rem;
		font-weight:500;
        color:rgba(48,197,171,1);
	}
	.btnBox{
		display: flex;
		justify-content: space-between;
		margin-top:0.88rem;
	}
	.btnBox span{
		display: inline-block;
		width:1.51rem;
		height:0.62rem;
		line-height: 0.62rem;
		background: url(xxx.png)no-repeat left center;
		background-size:100% 100%;
		font-weight:500;
	    color:rgba(48,197,171,1);
	    font-size:0.33rem;
	}
	.btnBox span:last-child{
		background: url(xxx.png)no-repeat left center;
		background-size:100% 100%;
		color:rgba(212,255,249,1);
	}
</style>

第二步编写名为confirm的js文件,用于编写弹框事件处理逻辑，此处以两个按钮（确定，取消）为例

import Vue from 'vue';
import confirm from 'xxx/confirm.vue';

let confirmConstructor = Vue.extend(confirm);

let theConfirm = function (text) {
    return new Promise((res, rej) => { //promise封装，ok执行resolve，no执行rejectlet
      let confirmDom = new confirmConstructor({   
        el: document.createElement('div')
      })
      document.body.appendChild(confirmDom.$el);  //new一个对象，然后插入body里面

      confirmDom.text = text;   //为了使confirm的扩展性更强，这个采用对象的方式传入，所有的字段都可以根据需求自定义
      confirmDom.ok = function () {
        res()
        confirmDom.isShow = false
      }
      confirmDom.close = function () {
        rej()
        confirmDom.isShow = false
      }

    })
  }

  export default theConfirm;  
  
    //暴露出去，别忘记挂载到vue的原型上  
    //   => 在main.js里面先引入 import theConfirm from './components/confirm/confirm.js'
    //   => 再挂载 Vue.prototype.$confirm = theConfirm;
    //在需要的地方直接用以下方法调用即可：
    //   this.$confirm({
    //     type:'提示',
    //     msg:'是否删除这条信息？',
    //     btn:{
    //         ok:'yes',
    //         no:'no'
    //     }
    // }).then(() => {
    //     console.log('ok')
    // })
    // .catch(() => {
    //     console.log('no')
    // })

第三步在main.js页面挂载此弹框组件

//公共	弹框组件
import theConfirm from './assets/lib/confirm.js'
Vue.prototype.$confirm = theConfirm;

第四步，调用示例

**html**
    <button @click="delete"></button>
**js**
    delete(){
		this.$confirm({
			type:'提示',
			msg:'您确定不再关注该客户吗？',
			btn:{
				ok:'确定',
				no:'取消'
			}
		}).then(() => {
//点击确定之后的处理
}).catch(() => {
	Toast({
            message:'异常',
            position: 'middle',
            duration: 1000
          });
})