弹窗组件
<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>