50 lines
974 B
Vue
50 lines
974 B
Vue
|
<template>
|
||
|
|
<div v-if="isVisible" class="popup-container">
|
||
|
|
<div class="popup-content">
|
||
|
|
<slot></slot>
|
||
|
|
<!-- <button @click="closePopup">关闭</button> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'MiddlePopup',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isVisible: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
openPopup() {
|
||
|
|
this.isVisible = true;
|
||
|
|
document.body.style.overflow = 'hidden'; // 防止页面滚动
|
||
|
|
},
|
||
|
|
closePopup() {
|
||
|
|
this.isVisible = false;
|
||
|
|
document.body.style.overflow = 'auto'; // 恢复页面滚动
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.popup-container {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 6;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.popup-content {
|
||
|
|
/* background-color: white; */
|
||
|
|
/* padding: 20px; */
|
||
|
|
/* border-radius: 8px; */
|
||
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
</style>
|