vue彈出框的封裝和點選彈出框外部的事件觸發

封裝主要利用vue之間的元件通訊

Home.vue 父元件

<template>
  <div>
    <div class="box_popup">
      <div class="popup_title">彈出框</div>
      <button @click="tan">點選彈出彈出層</button>
      <!-- 
        title:標題內容 預設值：預設標題
        content_text:自定義文字內容 預設值：預設內容
        template:插槽內容，可插入文字框，HTML，圖片...
        hidden:判斷彈出層顯示隱藏
        popup_sub:子元件確定事件
        popup_clo:子元件的取消事件
        clo_box:點選了彈出框外部內容
       -->
      <Popup
        title="父元件標題"
        :hidden="this.ishidden"
        @popup_sub="popup_submit"
        @popup_clo="popup_close"
        @clo_box="close_box"
      >
      </Popup>
    </div>
  </div>
</template>

<script>
import Popup from "../components/Popup";
export default {
  components: {
    Popup,
  },
  data() {
    return {
      ishidden: false,
    };
  },
  methods: {
    //點選彈出彈出層
    tan() {
      this.ishidden = true;
    },
    //子元件的確定事件
    popup_submit() {
      this.ishidden = false;
      console.log("點選了確定按鈕");
    },
    //子元件的取消事件
    popup_close() {
      this.ishidden = false;
      console.log("點選了取消事件");
    },
    //點選彈出框以外觸發
    close_box() {
      this.ishidden = false;
      console.log("點選了彈出框外部");
    },
  },
};
</script>

<style scoped>
.box_popup {
  border: 1px solid red;
}
.popup_title {
  text-align: center;
  font-size: 30px;
}
</style>

Popup.vue 子元件

 <template>
  <div class="box" v-show="this.hidden" @click.stop="clo_box">
    <div class="popup_content">
      <div class="popup_title">{{ this.title }}</div>
      <div class="popup_center">
        <div v-if="this.content_text">{{ this.content_text }}</div>
        <slot></slot>
      </div>
      <div class="popup_bottom">
        <button @click="popup_sub">確定</button>
        <button @click="popup_clo">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "預設標題",
    },
    content_text: {
      type: String,
      default: "",
    },
    hidden: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    //點選確定事件
    popup_sub() {
      this.$emit("popup_sub");
    },
    //點選了取消事件
    popup_clo() {
      this.$emit("popup_clo");
    },
    //點選了彈出框以外區域
    clo_box(e) {
      if (e.target._prevClass == "box") {
        this.$emit("clo_box")
      }
    },
  },
};
</script>

<style scoped>
.box {
  background-color: rgba(128, 128, 128, 0.507);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
}
.popup_content {
  background-color: white;
  padding: 1%;
  border-radius: 20px;
  width: 40%;
  margin: 10% auto;
}
.popup_title {
  text-align: center;
  font-weight: 600;
  font-size: 30px;
}
.popup_center {
  padding: 10%;
  font-size: 20px;
}
.popup_bottom {
  display: flex;
  justify-content: space-around;
}
button {
  width: 25%;
  height: 20%;
  padding: 2%;
  border: 1px solid gray;
  border-radius: 10px;
}
button:nth-child(1) {
  background-color: orangered;
  color: white;
  font-size: 20px;
}
button:nth-child(2) {
  background-color: gray;
  color: black;
  font-size: 20px;
}
</style>