vue 自定义通知信息弹窗，全局可用

自定义属于自己的弹窗，并挂载在全局，可在全局使用。适合适用于通知类弹窗，业务逻辑复杂需要与其他组件交互的不推荐使用

在src/components/modal文件夹下创建两个文件分别为：index.js,Modal.vue

index.js

import Vue from "vue";
import Modal from "./Modal.vue";
//局部注册    需要传入 component 进行注册
let ModalConstructor = Vue.extend(Modal);

let instance;

const modal = function () {
  init();
  instance.goodsCode = goodsCode;
  instance.login = login;
  instance.paySuccess = paySuccess;
  instance.payError = payError;
  instance.coupons = coupons;
  instance.close = close;
  instance.errorMsg = errorMsg;
  return instance;
};

/*
 * pattern:
 *   1 => 商品码
 *   2 => 登录
 *   3 => 优惠券
 *   4 => 成功
 *   5 => 失败
 */
//商品码
const goodsCode = function () {
  this.$props.pattern = 1;
  this.show = true;
};
const login = function () {
  this.$props.pattern = 2;
  this.show = true;
};
//优惠劵
const coupons = function () {
  this.$props.pattern = 3;
  this.show = true;
};
//支付成功
const paySuccess = function () {
  this.$props.pattern = 4;
  this.show = true;
};
//支付失败
const payError = function (msg) {
  this.$props.pattern = 5;
  this.show = true;
  this.msg = msg;
};
const close = function () {
  this.show = false;
};

const errorMsg = function (msg) {
  this.show = true;
  this.msg = msg;
};

const init = function () {
  if (!instance) {
    instance = new ModalConstructor({
      el: document.createElement("div")
    });
    document.body.appendChild(instance.$el);
  }
};
export default modal();

Modal.vue

<template>
  <transition name="fade">
    <Layer v-show="show" :showMask="showMask">
      <div v-if="show" class="modal disable-select">
        <img
          :hidden="pattern == 6"
          class="close"
          @click="closeModal"
          :src="require('@/assets/images/close.png')"
        />
        <GoodsCode v-if="pattern === 1" placeholder="请输入商品码" />
        <Login v-if="pattern === 2" />
        <Coupons v-if="pattern === 3" />
        <div class="pay-success" v-if="pattern === 4">
          <img :src="require('@/assets/images/pay-success.png')" alt="成功" />
          <span>支付成功!</span>
          <span>欢迎来到{{ $bus.branch_info.storename }}</span>
          <span>期待您下次的光临！</span>
        </div>
        <div class="pay-error" v-if="pattern === 5">
          <img :src="require('@/assets/images/pay-fail.png')" alt="失败" />
          <span>支付失败!</span>
          <!-- <span>错误码：1001，{{msg}}请重新支付!</span> -->
          <span>{{msg}}</span>
        </div>
        <div class="error-msg" v-if="pattern === 6">{{ msg }}</div>
      </div>
    </Layer>
  </transition>
</template>

<script>
/*
 * pattern:
 *   1 => 商品码
 *   2 => 登录
 *   3 => 优惠券
 *   4 => 成功
 *   5 => 失败
 */
import Layer from '../layer/Layer'
import Login from '../login/Login'
import GoodsCode from '../goodsCode/GoodsCode'
import Coupons from '../coupons/Coupons'
/* 蒙层 */
export default {
  name: 'Modal',
  data: () => ({
    show: false
  }),
  props: {
    showMask: {
      type: Boolean,
      default: false
    },
    pattern: {
      type: Number
    },
    msg: String
  },
  components: {
    Layer,
    GoodsCode,
    Login,
    Coupons
  },
  methods: {
    closeModal() {
      this.show = false
    }
  }
}
</script>

<style scoped>
.modal {
  display: inline-block;
  padding: 30px;
  background: rgba(0, 0, 0, 0.92);
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  color: #fff;
  border-radius: 10px;
}
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.pay-success,
.pay-error {
  width: 700px;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pay-success span:nth-of-type(1),
.pay-error span:nth-of-type(1) {
  font-size: 40px;
  margin: 20px 0 40px;
}
.pay-success span:nth-of-type(2),
.pay-success span:nth-of-type(3),
.pay-error span:nth-of-type(2) {
  font-size: 32px;
}
.error-msg {
  font-size: 32px;
  padding: 50px;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.loading {
  animation: rotateForever 2s linear infinite;
  padding: 100px 150px;
}
@keyframes rotateForever {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.disable-select {
  user-select: none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}
</style>

在main.js挂载全局

import Modal from "@/components/modal/index.js";
Vue.prototype.$modal = Modal;

在项目的任何组件都可以直接使用

//调用弹窗
 this.$modal.paySuccess()
 //关闭弹窗
 this.$modal.close()