vue封装弹框组件

效果图：

/* eslint-disable no-irregular-whitespace */
<template>
  <div class="paymentdetail_compontents" v-if="isShowDialogs">
    <div class="paymentdetail_div_box">
      <div class="paymentdetail_div1">
        <span class="paymentdetail_div1_warn">提示</span>

        <div class="paymentdetail_person_box">{{ Message }}</div>
      </div>

      <div class="paymentdetail_div2">
        <span class="paymentdetail_div2_span" @click="isShowRefruct">取消</span>

        <span class="paymentdetail_div2_span1" @click="isShowAgree">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "alertbox",
  //使用props接收从父组件中接收的值
  props: ["isshowAlert", "Message"],
  data() {
    return {
      isShowDialogs: true
    };
  },
  methods: {
    isShowRefruct() {
      this.isShowDialogs = false;
      this.$emit("replaceChecked", "replace");
    },
    isShowAgree() {
      this.isShowDialogs = false;
      this.$emit("sureChecked", this.Message);
    }
  },
  //watch中监听弹框是否出现
  watch: {
    isshowAlert() {
      this.isShowDialogs = this.isshowAlert;
    }
  }
};
</script>

<style lang="scss" scoped>
.paymentdetail_compontents {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 33333;
  background-color: rgba(0, 0, 0, 0.6);
  .paymentdetail_div_box {
    width: 300px;
    background-color: white;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .paymentdetail_div1 {
      height: 90px;
      text-align: center;
      margin-top: 20px;
      .paymentdetail_person_box {
        height: 50px;
        margin-top: 20px;
        color: #685c5c;
      }
      .paymentdetail_div1_warn {
        color: #000;
        font-family: bolder;
      }
    }
    .paymentdetail_div2 {
      border-top: 1px solid #eee;
      /* display: flex; */
      span {
        /* flex: 1; */
        height: 39px;
        line-height: 39px;
        color: #5077aa;
        text-align: center;
        width: 50%;
      }
      .paymentdetail_div2_span {
        border-right: 1px solid #eee;
        color: #685c5c;
        float: left;
        box-sizing: border-box;
      }
      .paymentdetail_div2_span1 {
        float: right;
      }
    }
  }
}
</style>

在父组件中引入

import alertbox from "@/components/alertbox";
components: { alertbox }
<alertbox
      :isshowAlert="showAlert"
      :Message="alertMessage"
      @replaceChecked="replace_checked"
      @sureChecked="sure_checked"
    ></alertbox>
data() {
    return {
      showAlert: "",
      alertMessage: "弹框"
    };
  },
methods: {
    replace_checked() {
      console.log("你点击了取消按钮");
    },

    sure_checked() {
      console.log("你点击了确定按钮");
    }
  },