vue全局弹窗

在vue3中使用全局弹窗 样式比较简单 一左一右两个按钮 确认取消 支持传参 用this.$pop()这样的形式调用 就像uni中的一样

建一个工具js

import PopTemplate from '../plugins/pop/Template'
import {createApp} from 'vue'

export default{
	install: (app) => {
		// 弹窗 
        app.config.globalProperties.$pop = function (content, options) {
            // 默认配置
            var defaultConfig = {
                // 标题
                title: "",
                // 左侧按钮信息
                left: {
                    // 是否显示
                    show: true,
                    // 内容
                    text: '取消',
                    // 回调
                    callback: null
                },
                // 右侧按钮信息
                right: {
                    // 是否显示
                    show: true,
                    // 内容
                    text: '确认',
                    // 回调
                    callback: null
                },
                // 传参
                params: {

                }
            }
            if (typeof options != "undefined") {
                options.left = Object.assign(defaultConfig.left, options.left)
                options.right = Object.assign(defaultConfig.right, options.right)
            }
            const mountNode = document.createElement('div')
            document.body.appendChild(mountNode)
            var config = Object.assign(defaultConfig, options)
            var pop = createApp(PopTemplate)
            pop.mixin({
                data() {
                    return {
                        content: content,
                        title: config.title,
                        left: config.left,
                        right: config.right,
                        params: config.params
                    }
                },
                methods: {
                    // 关闭
                    close: function () {
                        pop.unmount(mountNode)
                        document.body.removeChild(mountNode)
                    }
                }
            })
            return pop.mount(mountNode)
        };
	}
}

PopTemplate.vue

<template>
  <div class="dialog-box">
    <div class="dialog">
      <div class="dia_tit">{{ title }}</div>
      <p class="pop-text">{{ content }}</p>
      <a @click="close()" class="btn-close"></a>
      <div class="pop-btn-box">
        <a v-if="right && right.show" @click="rightCallback()" class="btn-cancel">{{ right.text }}</a>
        <a v-if="left && left.show" @click="leftCallback() " class="btn-confirm">{{ left.text }}</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Pop",
  methods: {
    // 左按钮回调
    leftCallback: function() {
      // 先关闭弹窗
      this.close()
      // 再执行回调
      if(this.left.callback){
        console.log(this.left.callback)
        this.left.callback(this.params)
      }
    },
    // 右按钮回调
    rightCallback: function() {
      // 先关闭弹窗
      this.close()
      // 再执行回调
      if(this.right.callback){
        this.right.callback(this.params)
      }
    },
  }
};
</script>
<style>
/*pop*/
.dialog-box {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  opacity: 1;
}
.btn-close {
  display: block;
  width: 1.4rem;
  height: 0.47rem;
  position: absolute;
  top: 0rem;
  right: 0rem;
  background: url("../../assets/img/pop_close.png") no-repeat 82% center;
  background-size: 0.28rem 0.28rem;
}
.btn-close2 {
  display: block;
  width: 1.4rem;
  height: 0.47rem;
  position: absolute;
  top: 0rem;
  right: 0rem;
}
.dialog-box .dialog {
  width: 5.55rem;
  height: 3.35rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  outline: none;
  background: url("../../assets/img/new_pop_bg.png") no-repeat;
  background-size: 5.55rem 3.35rem;
  padding-top: 1px;
  font-size: 0.3rem;
}
.dialog-box .dialog2 {
  width: 8.8rem;
  height: 4.9rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  outline: none;
  background: url("../../assets/img/pop-weigui.png") no-repeat;
  background-size: 8.8rem 4.9rem;
  padding-top: 1px;
  font-size: 0.3rem;
}

.dialog .dia_tit {
  position: absolute;
  height: 0.53rem;
  line-height: 0.53rem;
  top: 0;
  left: 0.13rem;
  font-size: 0.28rem;
  color: #371a3b;
  background: -webkit-linear-gradient(left, #371a3b, #610928);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}
.pop-text {
  width: 90%;
  margin: 0.8rem auto 0;
  color: #2c3645;
  text-align: center;
  height: 1.8rem;
  overflow-y: auto;
  font-size: 0.24rem;
  display: block;
}
.pop-text2 {
  width: 90%;
  margin: 0.5rem auto 0;
  color: #2c3645;
  text-align: center;
  height: 3.55rem;
  overflow-y: auto;
  font-size: 0.24rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
}
.pop-text2 li {
  width: 48%;
  margin-top: 0.3rem;
  margin-left: 0.1rem;
  text-align: left;
  text-indent: 0.2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pop-text2 li .gou {
  display: block;
  background: url("../../assets/img/report-gouxuan.png") no-repeat;
  width: 0.33rem;
  height: 0.32rem;
  background-size: 100% auto;
  /* margin: 0 0.04rem 0.04rem; */
}
.pop-text2 li .on {
  display: block;
  background: url("../../assets/img/report-gouxuan2.png") no-repeat;
  width: 0.33rem;
  height: 0.32rem;
  background-size: 100% auto;
  /* margin: 0 0.04rem 0.04rem; */
}

.pop-btn-box {
  display: flex;
  width: 100%;
  height: 0.5rem;
  margin: 0.15rem auto 0;
  text-align: center;
  font-size: 0rem;
  align-items: center;
  justify-content: center;
}
.pop-btn-box a {
  margin-left: 0.2rem;
  width: 1.54rem;
  height: 0.43rem;
  line-height: 0.45rem;
  font-size: 0.22rem;
  display: block;
  font-weight: 600;
}
.btn-confirm,
.btn1 {
  color: #000;
  background: url("../../assets/img/btn-confirm.png") no-repeat;
}

.btn-cancel,
.btn2 {
  color: #000;
  background: url("../../assets/img/btn-cancel.png") no-repeat;
}
</style>