vue全局弹框组件

1、写一个常规的弹框组件

ClearConfirm.vue

<template>
  <div class="clearConfirm" v-if="isShow">
    <div class="box">
      <div class="close" @click="handleClose">
        <img src="./close.png" alt="">
      </div>
      <div class="text">是否清除此方案</div>
      <div class="btn">
        <div class="cancle" @click="handleClose">取消</div>
        <div class="confirm" @click="handleConfirm">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      isShow: true
    };
  },
  methods: {
    handleClose() {
      this.isShow = false;
    },
    handleConfirm() {
      this.isShow = false;
      this.callback();
    }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
.clearConfirm {
  user-select: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;

  .box {
    position: relative;
    background-color: #fff;
    padding: 0.4rem 0.6rem;
    padding-top: 0;
    width: 6rem;
    height: 2.35rem;
    border-radius: 0.06rem;
    .close {
      position: absolute;
      top: 0.1rem;
      right: 0.1rem;
      width: 0.34rem;
      height: 0.34rem;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
      }
    }

    .text {
      margin-top: 0.5rem;
      font-size: 0.32rem;
      font-weight: bold;
      color: rgba(64, 54, 50, 1);
      text-align: center;
    }

    .btn {
      margin-top: 0.4rem;

      display: flex;
      align-items: center;
      justify-content: center;

      .cancle {
        width: 1.62rem;
        height: 0.6rem;
        background-color: #e5e5e5;
        color: #8b8b8b;
        font-size: 0.32rem;
        text-align: center;
        line-height: 0.6rem;
      }
      .confirm {
        margin-left: 0.4rem;

        width: 1.62rem;
        height: 0.6rem;
        background-color: #c10002;
        color: #fff;
        font-size: 0.32rem;
        text-align: center;
        line-height: 0.6rem;
      }
    }
  }
}
</style>

大概长这个样子:

2、全局注册

Toast.js

import ClaerConfirm from './ClearConfirm.vue'
import Vue from 'vue'
let ToastCmp = Vue.extend(ClaerConfirm)

function toast(options) {
  let div = document.createElement('div')
  document.querySelector("#app").insertBefore(div, document.querySelector(".customMade"))
  let { title, content, btn, callback } = options || {}
  new ToastCmp({
    // 实力化会把data注入到目标组件
    data() {
      return {
        title: title || "Tips",
        content: content || "contents here",
        btn: btn || "confirm",
        callback: () => {
          callback && callback instanceof Function && callback()
          this.show = false
        }
      }
    }
  }).$mount(div)
}

export default {
  install: (Vue) => {
    Vue.prototype.$toast = toast
  }
}

然后在main.js 中引用:

import Toast from "@/components/alert/Toast.js"
Vue.use(Toast)

3、使用

// 在需要的位置弹出
this.$toast({
  callback: () => {
   	console.error("点击了确定")
  }
});

<全文结束>