modal.vue是Vue.js中一個(gè)常見(jiàn)的組件，用于顯示彈窗框。

該組件通常包含以下幾個(gè)部分：

<template>
<div class="modal">
<div class="modal-background" @click="$emit('close')"></div>
<div class="modal-content">
<slot></slot>
</div>
<button class="modal-close" @click="$emit('close')"></button>
</div>
</template>
<script>
export default {
name: 'Modal',
props: {
show: Boolean,
},
methods: {
closeModal() {
this.$emit('close');
},
},
};
</script>
<style scoped>
.modal {
display: none;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.modal-background {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 4px;
max-width: 500px;
max-height: 80%;
overflow: auto;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
}
</style>

上述代碼中，組件包含一個(gè)顯示和隱藏的邏輯，當(dāng)show為true時(shí)，該組件顯示；當(dāng)show為false時(shí)，該組件隱藏。使用該組件時(shí)，需要將show屬性作為該組件的props傳入，同時(shí)需要監(jiān)聽(tīng)close事件，以便在點(diǎn)擊關(guān)閉按鈕或者背景時(shí)，關(guān)閉彈窗。

另外，組件還包含一些基本的樣式，如彈窗的定位、背景顏色、內(nèi)邊距等。當(dāng)需要定制樣式時(shí)，可以通過(guò)在組件中添加style標(biāo)簽，并使用scoped屬性，來(lái)覆蓋組件中的樣式。