vue 自定义弹窗

<template>
  <div v-show="isPromptBox" class="prompt-box-popup">
    <div class="popup">
      <div class="popup-title">
        <span>{{ title }}</span>
        <span class="iconfont iconguanbi" @click="close"></span>
      </div>
      <div class="popup-main">
        <span :class="'iconfont ' + icon" :style="'color:' + iconColor"></span>
        <p>{{ content }}</p>
      </div>
      <div class="popup-footer">
        <div class="footerBtn" :style="BtnLeftStyle" @click="BtnLeftF()">
          {{ BtnLeft }}
        </div>
        <div class="footerBtn" :style="BtnRightStyle" @click="BtnRightF()">
          {{ BtnRight }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isPromptBox: {
      type: Boolean,
      required: true
    },
    promptBoxObj: {
      type: Object,
      required: false
    }
  },
  watch: {
    promptBoxObj(val) {
      this.title = val.title || this.title;
      this.icon = val.icon || this.icon;
      this.iconColor = val.iconColor || this.iconColor;
      this.content = val.content || this.content;
      this.BtnLeft = val.BtnLeft || this.BtnLeft;
      this.BtnRight = val.BtnRight || this.BtnRight;
      this.BtnLeftStyle = val.BtnLeftStyle || this.BtnLeftStyle;
      this.BtnRightStyle = val.BtnRightStyle || this.BtnRightStyle;
    }
  },

  data() {
    return {
      title: "提示框",
      icon: "iconalter",
      iconColor: "#f33249",
      content: "这里放内容",
      BtnLeft: "取消",
      BtnRight: "确定",
      BtnLeftStyle: "background:#2890fa;border-color:#2890fa;color:#ffffff;",
      BtnRightStyle: "background:#ffffff;border-color:#D0021B;color:#D3081D;"
    };
  },

  methods: {
    BtnRightF() {
      this.$emit("update:isPromptBox", false);
    },
    BtnLeftF() {
      this.$emit("update:isPromptBox", false);
    },
    close() {
      this.$emit("update:isPromptBox", false);
    }
  }
};
</script>

<style lang="less" scoped>
.prompt-box-popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  .popup {
    position: absolute;
    left: 25%;
    top: 25%;
    width: 720px;
    height: 400px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    .popup-title {
      height: 48px;
      line-height: 48px;
      border-bottom: 1px solid #dedede;
      font-size: 18px;
      color: #303133;
      text-align: center;
      .iconfont {
        font-size: 14px;
        color: #91949a;
        position: absolute;
        right: 13px;
        cursor: pointer;
      }
    }
    .popup-main {
      text-align: center;
      margin: auto;
      margin-top: 47px;
      overflow: auto;
      height: 200px;
      .iconfont {
        font-size: 48px;
      }
    }
    .popup-footer {
      position: absolute;
      width: 100%;
      bottom: 40px;
      text-align: center;
      .footerBtn {
        width: 120px;
        height: 40px;
        line-height: 40px;
        border-radius: 4px;
        border: 1px solid;
        display: inline-block;
        cursor: pointer;
      }
      .footerBtn + .footerBtn {
        margin-left: 88px;
      }
    }
  }
}
</style>

<template>
  <div class="enterprise-member">
    <!-- 删除按钮 -->
    <i class="el-icon-delete pointer-hands" @click="deleteF(scope.row)" ></i>
    <!-- 提示框 -->
    <ConfirmationBox
      :isPromptBox.sync="isConfirmationBox"
      :promptBoxObj="ConfirmationBoxObj"
      @ReturnData="ReturnData"
    ></ConfirmationBox>
  </div>
</template>

<script>
// 引入组件
import ConfirmationBox from "@/components/popup/ConfirmationBox";
export default {
  components: {ConfirmationBox},
  data() {
    return {
      // 提示框
      isConfirmationBox: false,
      ConfirmationBoxObj: {},
    };
  },
  methods: {

    // 返回数据
    ReturnData(data) {
      switch (data.type) {
        case "delete":
          if (data.btn === "right") {
            this.deleteF(data);
          }
          break;
      }
    },
    // 删除
    delete(data) {
      if (data.btn === "right") {
        // 调取接口
      } else {
        // 弹出窗口
        this.isConfirmationBox = true;
        this.ConfirmationBoxObj = {
          data: data,
          title: "删除确认",
          type: "delete",
          content: "是否确认删除",
          BtnLeftStyle:
            "background:#ffffff;border-color:#2890fa;color:#2890fa;",
          BtnRightStyle:
            "background:#2890fa;border-color:#2890fa;color:#ffffff;"
        };
      }
    },
  }
};
</script>