使用vue写一个弹出层代码

<template>
<div class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>{{ title }}</h3>
<button class="close-btn" @click="closeModal">X</button>
</div>
<div class="modal-body">
<p>{{ message }}</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" @click="closeModal">确定</button>
<button class="btn btn-secondary" @click="closeModal">取消</button>
</div>
</div>
</div>
</template>

<script>
export default {
name: "Modal",
props: {
title: {
type: String,
required: true
},
message: {
type: String,
required: true
},
showModal: {
type: Boolean,
required: true
}
},
methods: {
closeModal() {
this.$emit("close");
}
}
};
</script>

<style scoped>
.modal {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}

.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 5px;
padding: 20px;
width: 400px;
}

.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

.modal-header h3 {
margin: 0;
}

.close-btn {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 20px;
}

.modal-body {
margin-bottom: 20px;
}

.modal-footer {
display: flex;
justify-content: flex-end;
}

.btn {
padding: 10px;
border-radius: 5px;
border: none;
cursor: pointer;
font-size: 16px;
margin-left: 10px;
}

.btn-primary {
background-color: #007bff;
color: #fff;
}

.btn-secondary {
background-color: #eee;
color: #333;
}
</style>