vue-弹窗

弹窗组件

<script setup>
import { Close } from "@element-plus/icons-vue";

const emit = defineEmits(["popupConfirm"]);
const del = () => {
  emit("popupConfirm");
};
</script>
<template>
  <div id="popup">
    <div class="psnCon">
      <el-icon :size="30" style="cursor:pointer;float: right;" @click="del"><Close /></el-icon>
    </div>
  </div>
</template>
<style scoped>
#popup {
  width: 100%;
  position: fixed;
  top: 0rem;
  min-height: 100vh;
  z-index: 3;
  font-size: 14px;
}

.psnCon {
  width: 60%;
  background-color: #fff;
  margin: 0 10%;
  margin-top: 15vh;
  border: 3px solid #7e6934;
  height: 70vh;
  padding: 20px;
  overflow: auto;
}
</style>

控制显示与隐藏

<script setup>
import { ref } from 'vue'
import detailPopup from "@/components/PopUp.vue";

const showDialog = ref(false);
const showModal2 = () => {
  showDialog.value = true;
  console.log(true);
};

const confirm = () => {
  showDialog.value = false;
};
</script>
<template>
    <el-button @click="showModal2()">打开弹窗</el-button>
    <detailPopup v-show="showDialog" @popupConfirm="confirm"/>
</template>